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《21 世纪 计算 机 科学 与 技术 实践 型 教程》 
序 


21 世纪 影响 世界 的 三 大 关键 技术 是 : 以 计算 机 和 网 络 为 代表 的 信息 技术 ;以 基因 工 
程 为 代表 的 生命 科学 和 生物 技术 ;以 纳米 技术 为 代表 的 新 型 材料 技术 。 信 息 技术 居 三 大 
关键 技术 之 首 。 国 民 经 济 的 发 展 采 取信 息 化 带动 现代 化 的 方针 ,要 求 在 所 有 领域 中 迅速 
推广 信息 技术 ,导致 需要 大 量 的 计算 机 科学 与 技术 领域 的 优秀 人 才 。 

计算 机 科学 与 技术 的 广泛 应 用 是 计算 机 学 科 发 展 的 原动力 ,计算 机 科学 是 一 门 应 用 
科学 。 因 此 ,计算 机 学 科 的 优秀 人 才 不 仅 应 具有 坚实 的 科学 理论 基础 ,而且 更 重要 的 是 能 
将 理论 与 实践 相 结合 ,并 具有 解决 实际 问题 的 能 力 。 培 养 计算 机 科学 与 技术 的 优秀 人 才 
是 社会 的 需要 、 国 民 经 济 发 展 的 需要 。 

制定 科学 的 教学 计划 对 于 培养 计算 机 科学 与 技术 人 才 十 分 重要 ,而 教材 的 选择 是 实 
施 教学 计划 的 一 个 重要 组 成 部 分 ,《21 世纪 计算 机 科学 与 技术 实践 型 教程 ) 主 要 考虑 了 下 
述 两 方面 。 

一 方面 ,高 等 学 校 的 计算 机 科学 与 技术 专业 的 学 生 . 在 学 习 了 基本 的 必修 课 和 部 分 选 
修 课程 之 后 ,立刻 进行 计算 机 应 用 系统 的 软件 和 硬件 开发 与 应 用 尚 存在 一 些 困难 ,而 (21 世 
纪 计 算 机 科学 与 技术 实践 型 教程 ) 就 是 为 了 填补 这 部 分 鸿沟 。 将 理论 与 实际 联系 起 来 , 结 
合 起 来 ,使 学 生 不 仅 学 会 了 计算 机 科学 理论 ,而且 也 学 会 应 用 这 些 理 论 解决 实际 问题 。 

另 一 方面 ,计算 机 科学 与 技术 专业 的 课程 内 容 需 要 经 过 实践 练习 ,才能 深刻 理解 和 掌握 。 
因此 ,本 套 教材 增强 了 实践 性 ,应 用 性 和 可 理解 性 ,并 在 体例 上 做 了 改进 一 一 使 用 案例 说 明 。 

实践 型 教学 占有 重要 的 位 置 , 不 仅 体现 了 理论 和 实践 紧密 结合 的 学 科 特 征 ,而 且 对 于 提 
高 学 生 的 综合 素质 ,培养 学 生 的 创新 精神 与 实践 能 力 有 特殊 的 作用 。 因 此 .研究 和 撰写 实践 
型 教材 是 必须 的 ,也 是 十 分 重要 的 任务 。 优 秀 的 教材 是 保证 高 水 平 教学 的 重要 因素 ,选择 水 
平 高 .内容 新 、 实 践 性 强 的 教材 可 以 促进 课堂 教学 质量 的 快速 提升 。 在 教学 中 .应 用 实践 型 
教材 可 以 增强 学 生 的 认 知 能 力 、 创 新 能 力 、 实 践 能 力 以 及 团队 协作 和 交流 表达 能 力 。 

实践 型 教材 应 由 教学 经 验 丰富 、 实 际 应 用 经 验 丰富 的 教师 撰写 。 此 系列 教材 的 作者 
不 但 从 事 多 年 的 计算 机 教学 ,而 且 参 加 并 完成 了 多 项 计算 机 类 的 科研 项 目 , 把 他 们 积累 的 
经 验 、 知 识 ,智慧 ,素质 融合 于 教材 中 ,奉献 给 计算 机 科学 与 技术 的 教学 。 

我 们 在 组 织 本 系列 教材 过 程 中 ,虽然 经 过 了 详细 地 思考 和 讨论 ,但 毕 竞 是 初步 的 尝 
试 ,不 完善 甚至 缺陷 不 可 避免 , 敬 请 读者 指正 。 


本 系列 教材 主编 ” 陈 明 
2005 年 1 月 于 北京 
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随 着 网 络 应 用 的 普及 与 发 展 , Web 应 用 程序 的 使 用 越 来 越 广泛 , Web 开发 技术 以 其 
开放 性 、 灵 活性 ,安全 性 和 成 熟 度 启 得 了 很 大 的 市 场 ,成 为 Web 项 目 开 发 的 重要 技术 手段 
Zz. 

本 书 是 在 应 用 型 人 才 培 养 的 大 背景 下 编写 的 ,全 书 采用 项 目 案例 训练 的 设计 方式 , 符 
合 人 才 培 养 的 行动 导向 ,按照 静态 Web 开发 到 动态 Web 开发 的 逻辑 编排 课程 内 容 ,案例 
设计 时 以 实践 应 用 能 力 为 主线 ,强调 理论 知识 学 习 与 实践 应 用 能 力 培 养 并 存 的 人 才 培 养 
思想 ,将 Web 程序 开发 的 知识 点 融入 案例 实践 中 进行 解析 与 重组 ,构建 Web 项 目 开 发 学 
习 体系 。 

本 书 以 电子 商务 平台 开发 为 基础 ,采用 任务 分 解 、 案 例 导向 的 思路 ,按照 课程 内 容 由 
简单 到 复杂 ,实施 难度 由 易 到 难 的 方式 编排 。 每 个 实践 案例 分 为 案例 需求 说 明 ,技能 训练 
要 点 以 及 案例 实现 三 个 部 分 ,使 学 生 可 以 边 学 边 练 ,达到 所 学 即 所 得 的 效果 。 

本 书 的 最 大 特色 是 注重 案例 实践 ,体现 应 用 型 高 校 的 “理论 扎实 ,拔高 实践 "的 人 才 培 
养 原则 ,理论 结合 实际 ,有 利于 读者 对 相应 编程 思想 和 实践 案例 的 理解 与 掌握 。 本 书 还 具 
有 以 下 特色 : 

CD 内 容 广泛 .案例 丰富 ,其 中 的 例题 .习题 及 实践 案例 都 来 源 于 一 线 教学 。 

(2) 按照 读者 在 学 习 程序 设计 中 遇 到 的 问题 组 织 内 容 , 随 着 读者 对 Web 开发 的 理解 
的 提高 和 实际 动手 能 力 的 增强 ,课程 内 容 由 浅 入 深 地 平滑 向 前 推进 。 

CD 每 章 都 给 出 了 相应 的 任务 实践 . 配 以 解析 和 任务 实现 。 这 些 内 容 不 仅 能 够 与 理 
论 知识 点 无 颖 对 接 , 而 且 短 小 精炼 ,方便 读者 自行 尝试 。 

(4) 案例 以 电子 商务 平台 开发 为 基础 ,每 章 的 例题 都 使 用 相对 独立 的 例子 ,并 辅 以 实 


例 输 出 。 
(5) 课 后 的 练习 题 包 括 选择 题 .填空 题 , 简 答题 和 编程 题 , 部 分 内 容 在 前 后 章节 中 具 
有 一 定 的 延续 性 。 


(6) 本 书 的 配套 资料 包含 课件 实例 源 代码 ,练习 题 及 编程 练习 答案 。 书 中 的 源 代码 
可 以 自由 修改 、 编 译 ,以 符合 使 用 者 的 需要 。 

通过 本 书 的 学 习 , 读 者 可 以 了 解 Web 项 目 开 发 所 需要 的 基本 技术 ,对 完整 的 Web 项 
目的 开发 有 一 个 具体 的 了 解 ,减少 对 Web 项 目 开发 的 盲目 感 ,能 够 根据 本 书 的 体系 循序 
渐进 地 动手 做 出 自己 的 实 训 项 目 。 

本 书 特别 适合 培养 应 用 型 人 才 高 校 的 计算 机 类 、 信 息 类 及 电子 商务 类 等 专业 使 用 ,可 
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以 作为 Web HORSE Web 程序 设计 、 互 联网 与 Web 编程 .电子 商务 平台 开发 技术 等 课 
程 的 教材 ,也 可 以 作为 非 计 算 机 专业 学 生 和 工程 技术 人 员 进 行 Web 编程 时 的 教材 及 参考 
书籍 。 

本 书 由 朱林 . 庄 丽 担任 主编 , 杨 平 乐 . 徐 新 、 潘 操 、 高 洁 担任 副 主编 。 具 体 分 工 如 下 表 
Bin ,全 书 由 朱林 进行 整理 与 统 稿 。 
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第 1 章 M 述 


1.1 Web Ñ T 


Web 是 Internet KRAE, UR 声音 、 动 画 、 视 频 等 多 种 媒体 信息 于 一 身 的 信息 服 
务 系统 , Web 开发 技术 是 一 系列 用 程序 设计 语言 来 解决 与 Web 相关 的 互联 网 领域 问题 
的 技术 。 一 般 而 言 , Web 包括 Web 服务 器 和 Web 客户 端 两 部 分 , Web 的 开发 主要 集中 
在 服务 器 端的 开发 , 且 其 服务 器 端的 开发 技术 非常 丰富 ,比如 ASP、JSP、PHP、ASP. NET 
和 第 三 方 框架 等 ,这 些 技术 对 Web 领域 的 发 展 注 入 了 强大 的 动力 。 


1.2 Web 项 目 开 发 课程 地 位 





Web 项 目 开发 课程 在 高 校 信息 大 类 专业 课程 体系 中 占有 重要 的 地 位 ,是 一 门 技术 性 
和 可 操作 性 都 很 强 的 课程 ,本 课程 是 在 学 生 具备 了 程序 设计 知识 与 面向 对 象 技术 的 基础 
上 ,为 进一步 提高 项 目 实践 能 力 开拓 创新 能 力 而 设置 的 具有 应 用 型 特征 的 课程 。 它 的 先 
修 课程 为 程序 设计 数据 库 原理 以 及 基本 的 网 页 设计 基础 ,在 修 完 本 门 课程 后 ,学 生 就 可 
以 进一步 地 去 修 读 企业 级 应 用 程序 开发 .Ajax 程序 设计 框架 开发 以 及 手机 端 移动 开发 
等 后 继 课程 ,具体 课程 位 置 如 图 1-1 所 示 。 





[一 一 | 企业 级 程序 设计 





程序 设计 

















一 一 Ajax 程 序 设计 
数据 库 原理 | 一 eg Web 项 目 开发 一 | 


[一 | ”框架 开发 
网 页 设计 


—- 手机 开发 
1-1 课程 地 位 结构 图 



































1.3 Web 应 用 程序 开发 





1.3.1 Web 的 概念 及 发 展 
Web 指 的 是 World Wide Web. ,简称 WWW: 也 叫 3W. 中 文 译名 为 万 维 网 或 全 球 信息 
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网 。Web 提供 一 个 图 形 化 的 界面 ,用 以 浏览 网 上 资源 。 它 是 一 个 在 Internet 上 运行 的 全 
球 性 ,分布 式 信息 发 布 系统 。 该 系统 通过 Internet 向 用 户 提供 基于 超 媒 体 的 数据 信息 服 
务 。 所 以 ,在 一 定 意义 上 说 , Web 也 是 Internet 提供 的 一 种 服务 ,是 基于 Internet, R 
Internet 协议 的 一 种 体系 结构 。 

Web 技术 是 Internet 的 核心 技术 之 一 , 它 的 主要 功能 是 信息 发 布 和 信息 处 理 , 这 也 
是 网 上 信息 系统 的 一 个 重要 功能 .具有 以 下 特点 : 

(1) Web 是 一 种 超 文本 信息 系统 。 

(2) Web 是 图 形 化 的 和 易于 导航 的 。 

(3) Web 与 平台 无 关 。 

(4) Web 是 分 布 式 的 。 

(5) Web 是 动态 的 、 交 互 的 。 

(6) Web 具有 新 闻 性 。 

由 于 技术 的 进步 和 网 络 环境 的 进化 ,Web 应 用 程序 开发 的 技术 也 在 不 断 进步 ,最 早 ， 
人 们 为 了 便于 开展 科学 研究 ,设计 出 了 Internet. 当时 只 用 于 连接 美国 的 少数 几 个 顶尖 研 
究 机 构 , 之 后 随 着 进一步 的 发 展 , 人 们 开始 应 用 HTTP 协议 (Hypertext Transfer 
Protocol, 超 文本 传输 协议 ) 进 行 超 文 本 (hypertext) 和 超 媒 体 (hypermedia) 数 据 的 传输 ， 
从 而 将 一 个 个 的 网 页 展示 在 每 个 用 户 的 浏览 器 上 ,今天 的 Web 已 经 从 最 早 的 静态 Web 
发 展 到 了 动态 Web 阶段 , 随 之 而 来 的 像 网 上 银行 、 网 络 购物 等 电子 商务 站 点 的 兴起 ,更 是 
将 Web 带 进 了 人 们 的 生活 和 工作 之 中 。 


1.3.2 Web 应 用 程序 的 运行 原理 


互联 网 中 有 数 以 亿 计 的 网 站 ,用 户 可 以 通过 浏览 这 些 网 站 获得 所 需要 的 信息 。 例 如 ， 
用 户 在 浏览 器 的 地 址 栏 中 输入 http: //www. baidu. com, 浏 览 器 就 会 显示 百度 的 首页 ， 
从 中 可 以 搜索 相关 的 信息 。 那 么 百度 首页 的 内 容 是 存放 在 哪里 的 呢 ? 百度 首页 的 内 容 是 
存放 在 百度 网 服务 器 上 的 。 所 谓 服务 器 ,就 是 网 络 中 的 一 台 主机 .由 于 它 提供 Web. FTP 
等 网 络 服务 ,因此 称 其 为 服务 器 。 

用 户 的 计算 机 又 是 如 何 将 存在 网 络 服务 器 上 的 网 页 显示 在 浏览 器 中 的 呢 ? 例如 , 当 
用 户 在 地 址 栏 中 输入 百度 网 址 的 时 候 , 浏 览 器 会 向 百度 网 站 的 服务 器 发 送 请 求 , 这 个 请 求 
使 用 HTTP 协议 ,其 中 包括 请 求 的 主机 名 、HTTP 版 本 号 等 信息 。 服 务 器 在 收 到 请 求 信 
息 后 ,将 回复 的 信息 (一 般 是 文字 、 图 片 等 网 页 信息 ,也 就 是 HTML 页 面 ) 准 备 好 ,再 通过 
网 络 发 回 给 客户 端 浏览 器 。 客 户 端的 浏览 器 在 接收 到 服务 器 传 回 的 信息 后 ,将 其 解释 并 
显示 在 浏览 器 的 窗口 中 ,这样 用 户 就 可 以 进行 浏览 了 。 整 个 过 程 如 图 1-2 所 示 。 在 这 个 
“请 求 -响应 ”的 过 程 中 ,如 果 在 服务 器 上 存放 的 网 页 为 静态 HTML 网 页 文件 ,服务 器 就 会 
原封 不 动 地 返回 网 页 的 内 容 。 如 果 存 放 的 是 动态 网 页 ,如 JSP, ASP, ASP. NET 等 文件 ， 
则 服务 器 会 执行 动态 网 页 ,执行 的 结果 是 生成 一 个 HTML 文件 ,然后 再 将 这 个 HTML 
文件 发 送 给 客户 端 浏览 器 ,客户 浏览 器 将 其 解释 为 用 户 见 到 的 页 面 。 

Web 应 用 程序 通常 由 大 量 的 页 面 、 资 源 文件 部署 文件 等 文件 组 成 ,组 成 网 站 的 大 量 
文件 之 间 通 过 特定 的 方式 进行 组 织 ,并 且 由 一 个 系统 来 管理 这 些 文件 。 管理 这 些 文 件 的 
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图 1-2 Web 服务 过 程 


系统 通常 称 为 应 用 服务 器 , 它 的 主要 作用 就 是 管理 网 站 的 文件 。 网 站 的 文件 通常 有 以 下 
几 种 类 型 : 

(1) 网 页 文件 一 一 主要 是 提供 用 户 访问 的 页 面 ,包括 静态 的 和 动态 的 ,这 是 网 站 中 最 
重要 的 部 分 ,如 . html. jsp 等 ; 

(2) 网 页 的 格式 文件 一 一 可 以 控制 网 页 信息 显示 的 格式 样式, 如. css 等 ; 





(3) 资源 文件 一 一 网 页 中 用 到 的 文字 、 图 形 、 声 音 、 动 画 、 资 料 库 以 及 各 式 各 样 的 
软件 ; 

(4) 配置 文件 一 一 用 于 声明 网 页 的 相关 信息 、 网 页 之 间 的 关系 以 及 对 所 在 运行 环境 
的 要 求 等 ; 


(5) 处 理 文件 一 一 用 于 对 用 户 的 请 求 进行 处 理 , 如 供 网 页 调用 、 读 写 文件 或 访问 数据 


1.3.3 Web 应 用 程序 开发 模式 


1. 开发 模式 简介 

在 传统 的 Web 应 用 程序 开发 中 ,需要 同时 开发 客户 端 和 服务 器 端的 程序 ,服务 器 端 
提供 基本 的 服务 ,客户 端 是 提供 给 用 户 的 访问 接口 ,用户 可 以 通过 客户 端的 软件 访问 服务 
器 提供 的 服务 ,这 种 Web 应 用 程序 的 开发 模式 就 是 C/S 开发 模式 ,在 这 种 模式 中 ,由 服 
务 器 端 和 客户 端 共同 配合 来 完成 复杂 的 业务 逻辑 。 例 如 我 们 使 用 的 QQ 和 一 些 需 要 安装 
的 网 络 游 戏 。 这 些 Web 应 用 程序 都 是 需要 用 户 安装 客户 端 软件 才 可 以 使 用 的 。 

在 目前 的 Web 应 用 程序 开发 中 ,一 般 情 况 下 会 采用 另 一 种 开发 模式 ,在 这 种 开发 模 
式 中 ,不 再 单独 开发 客户 端 软件 ,客户 端 只 需要 一 个 浏览 器 即 可 ,软件 开发 人 员 只 需 专注 
于 开发 服务 器 端的 功能 ,用 户 通 过 浏览 器 就 可 以 访问 服务 器 端 提 供 的 服务 ,这 种 开发 模式 
就 是 当前 流行 的 B/S 架构 ,在 这 种 架构 中 ,程序 员 只 需要 开发 服务 器 端的 程序 功能 ,而 无 
须 考虑 客户 端 软 件 的 开发 .客户 通过 一 个 浏览 器 就 可 以 访问 应 用 系统 提供 的 功能 。 这 种 
架构 是 目前 Web 应 用 程序 的 主要 开发 模式 ,例如 各 大 电子 商务 网 站 、 各 种 Web 信息 管理 
系统 等 ,使 用 B/S 的 架构 加 快 了 Web 应 用 程序 开发 的 速度 .提高 了 开发 效率 。 

2. C/S 与 B/S 对比 

C/S 架构 (Client/Server, 客 户 端 /服务 器 端 模式 ) 是 一 种 传统 的 开发 架构 ,在 这 种 架 
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构 方 式 中 ,多 个 客户 端 围绕 着 一 个 或 者 多 个 服务 器 ,这 些 客户 端 是 安装 在 客户 机 上 的 , 负 
责 用 户 业 务 逻 辑 的 处 理 , 且 可 以 根据 不 同 的 用 户 需 求 进 行 定制 。 在 服务 器 端 仅仅 对 重要 
的 过 程 和 数据 库 进 行 处 理 和 存储 。 

C/S 开发 模式 中 ,需要 注意 将 任务 合理 分 配 到 Client( 客 户 ) 端 和 Server( 服 务 器 ) 端 ， 
最 简单 的 C/S 体系 架构 由 两 部 分 组 成 , 即 客户 应 用 程序 和 数据 库 服务 器 程序 ,可 分 别称 
为 前 台 程序 与 后 台 程 序 , 如 图 1-3 所 示 。 





应 用 
程序 
































客户 机 客户 机 客户 机 客户 机 
1-3 C/S 开发 模式 结构 图 


C/S ?R FJ (f c du RI S. TE C/S 架构 中 ,系统 部 署 时 需要 在 每 个 用 户 的 机 器 上 安 
装 客户 端 , 这 样 的 处 理 方式 带 来 了 很 大 的 工作 量 ;而 且 在 C/S 架构 中 ,软件 的 升级 也 是 很 
麻烦 的 一 件 事情 ,哪怕 是 再 小 的 一 点 改动 ,都 要 把 所 有 的 客户 端 全 部 修改 更 新 ,具体 有 以 
下 的 不 足 之 处 。 

COD 伸缩 性 差 : 客户 机 与 服务 器 联系 很 紧密 ,在 修改 客户 机 或 服务 器 的 某 一 方程 序 
时 一 般 还 要 修改 另 一 方 ,这 使 软件 不 易 伸 缩 、 维 护 量 大 。 

(2) 性 能 较 差 : 在 数据 量 较 大 的 情况 下 ,数据 从 服务 器 端 传送 到 客户 端 进行 处 理 时 ， 
会 消耗 客户 机 的 系统 资源 ,出 现 网 络 拥塞 ,从 而 使 整个 系统 的 性 能 下 降 。 

(3) 重用 性 差 : 数据 库 访问 、 业 务 规则 等 都 固化 在 客户 端 应 用 程序 中 ,如 果 客 户 另外 
提出 的 其 他 应 用 需求 中 也 包含 了 相同 的 业务 规则 ,程序 开发 者 将 不 得 不 重新 编写 相同 的 
代码 。 

(4) 移植 性 差 : 某 些 处 理 任 务 是 在 服务 器 端 由 触发 器 或 存储 过 程 来 实现 的 ,其 适应 
性 和 可 移植 性 较 差 。 因 为 这 样 的 程序 可 能 只 能 运行 在 特定 的 数据 库 平台 下 , 当 数 据 库 平 
台 变 化 时 ,这 些 应 用 程序 可 能 需要 重新 编写 。 

这 些 致命 的 弱点 决定 了 C/S 架构 的 命运 。 在 C/S 架构 模式 流行 一 段 时 间 以 后 ,逐渐 
被 另 一 种 Web 应 用 系统 的 架构 方式 所 代替 ,就 是 B/S 架构 。 

B/S 架构 (Browser/Server, 浏 览 器 /服务 器 模式 ) 是 Web 兴起 后 的 一 种 新 型 的 网 络 
结构 模式 , 它 是 在 客户 层 (Client) 和 数据 服务 器 层 (Data Server) 之 间 添 加 第 三 层 应 
用 服务 器 层 。 其 中 客户 层 只 用 来 实现 人 机 交互 ,数据 服务 器 层 提供 数据 信息 服务 ,应 用 服 





务 器 层 来 完成 应 用 逻辑 的 实现 ,数据 访问 等 功能 。 
在 这 种 模式 中 ,系统 功能 实现 的 核心 部 分 集中 到 服务 器 上 ,简化 了 系统 的 开发 .维护 
和 使 用 。Web 浏览 器 是 客户 端 最 主要 的 应 用 软件 ， 


客户 机 上 只 需要 安装 一 个 浏览 器 即 可 ,如 Internet Ed- = 
Explorer 或 Netscape Navigator. 服务 器 端 安装 数据 库 
Oracle, Sybase, Informix 或 SQL Server 等 数据 库 ， usn | DG 
浏览 器 通过 服务 器 同 数 据 库 进行 数据 交互 。 大 大 简 

化 了 客户 端 计算 机 的 逻辑 功能 ,减轻 了 系统 维护 与 


升级 的 成 本 和 工作 量 , 降 低 了 用 户 的 总 体 成 本 。B/S E al 人 fz 5 
架构 开发 模式 结构 图 如 图 1-4 BER. e e e 

B/S 架构 具有 以 下 优 缺 点 。 

优点 : 

(1) B/S 结构 最 大 的 优点 就 是 可 以 在 任何 地 方 进行 操作 而 不 用 安装 任何 专门 的 软 
件 。 只 要 有 一 台 能 上 网 的 计算 机 就 能 使 用 ,客户 端 零 维 护 。 系 统 的 扩展 性 非常 容易 ,只 要 
能 上 网 ,再 由 系统 管理 员 分 配 一 个 用 户 名 和 密码 ,就 可 以 使 用 了 。 

(2) 安全 性 高 ,隔离 了 客户 端 与 数据 服务 器 的 直接 访问 。 

(3) 易 维护 ,业务 逻辑 在 中 间 件 服务 器 上 , 当 业 务 规则 发 生 改变 时 ,客户 端 无 须 改动 ， 
只 升级 中 间 件 服务 器 层 的 程序 即 可 。 

(4) 快速 响应 ,通过 中 间 件 服务 器 层 上 的 负载 均衡 及 缓存 数据 的 能 力 达 到 较 快 的 响 
应 速度 。 

(5) 系统 扩展 灵活 ,通过 在 中 间 件 服务 器 层 上 部 署 新 的 程序 组 件 来 扩展 系统 规模 。 

缺点 : 

(D B/S 架构 在 图 形 的 表现 能 力 上 以 及 运行 的 速度 上 弱 于 C/S 架构 。 

(2) 受 程序 运行 环境 限制 。 由 于 B/S 架构 依赖 浏览 器 ,而 浏览 器 的 版 本 繁多 ,很 多 浏 
览 器 核心 架构 差别 也 很 大 ,导致 对 于 网 页 的 兼容 性 有 很 大 影响 ,尤其 是 在 CSS 布局 、 
JavaScript 脚本 执行 等 方面 ,会 有 很 大 影响 。 

在 C/S 和 B/S 两 种 架构 之 间 , 并 没有 严格 的 界限 .两 种 架构 之 间 没 有 好 坏 之 分 ,使 用 
这 两 种 架构 都 可 以 实现 系统 的 功能 。 开 发 人 员 可 以 根据 实际 的 需要 进行 选择 ,例如 需要 
丰富 的 用 户 体验 (如 一 些 网 络 游戏 ) ,就 选择 C/S 架构 ,如 果 更 偏重 的 是 功能 服务 方面 的 
实现 ,就 需要 选择 B/S 架构 ,还 有 部 分 管理 应 用 系统 采用 两 种 软件 架构 相 结合 的 方法 。 


1-4 ”B/S 开发 模式 结构 图 


1.4 静态 网 页 和 动态 网 页 





1.4.1 静态 与 动态 网 页 对 比 


静态 网 页 是 指 网 页 的 内 容 是 固定 的 ,不 会 根据 浏览 者 的 不 同 需求 而 改变 。 静 态 网 页 
一 般 使 用 HTML( 超 文本 标记 语言 ) 语 言 进 行 编写 。 其 文件 后 缀 通常 为 . htm、 html, 
. shtml, . xml 等 。 静 态 网 页 的 基本 特点 是 除非 网 页 设计 者 修改 了 网 页 的 内 容 , 否 则 网 页 内 
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容 不 会 发 生变 化 。 静 态 网 页 在 执行 过 程 中 不 能 实现 和 浏览 网 页 的 用 户 之 间 的 交互 。 信 息 
流向 是 单 向 的 , 即 从 服务 器 到 浏览 器 。 

需要 注意 的 是 ,在 HTML 格式 的 网 页 上 ,也 可 以 出 现 各 种 “动态 效果 ”, 如 . gif 格式 的 
zjm Flash 滚动 字幕 等 ,但 这 些 “ 动 态 效果 ”只 是 视觉 上 的 ,而 不 是 内 容 上 的 动态 。 

动态 网 页 就 是 该 网 页 文件 不 仅 包括 HTML 标记 ,而 且 包 含 一 些 程 序 代 码 。 这 种 网 
页 文件 名 的 后 组 依 不 同 的 程序 设计 语言 而 不 同 ,如 JSP 文件 的 后 组 为 . jsp, 除 此 之 外 ,还 
有 一 些 动态 网 页 形式 ,如 . asp.. php、 perl、. cgi 等 形式 。 动 态 网 页 主要 用 于 实现 客户 端 
和 服务 器 端的 交互 。 动 态 网 页 的 内 容 是 当 用 户 请 求 时 由 服务 器 运行 程序 后 返回 的 。 采 用 
动态 网 页 技术 的 网 站 可 以 实现 更 多 的 功能 ,如 用 户 注册 、 用 户 登录 、 搜 索 查 询 .用 户 管理 、 
订单 管理 等 。 还 需要 注意 的 是 ,动态 网 页 以 数据 库 技术 为 基础 ,可 以 大 大 降低 网 站 维护 的 
工作 量 。 

因此 ,动态 网 页 和 静态 网 页 的 根本 区 别 在 于 服务 器 端 返回 的 HTML 文件 是 事先 存 
储 好 的 还 是 由 动态 网 页 程序 生成 的 。 静 态 网 页 文件 里 只 有 HTML 标记 ,没有 动态 程序 
代码 ,网 页 的 内 容 都 是 事先 写 好 ,存放 在 服务 器 上 的 ;动态 网 页 文件 不 仅 含 有 HTML 标 
记 , 并 且 还 含有 动态 程序 代码 , 当 用 户 发 出 请 求 时 ,服务 器 由 动态 网 页 程序 即时 生成 
HTML 文件 , 即 动态 网 页 能 够 根据 不 同 的 时 间 、 不 同 的 用 户 生成 不 同 的 HTML 文件 , 显 
示 不 同 的 内 容 。 


1.4.2. 动态 网 页 语言 


在 最 早 的 时 候 , 动 态 网 页 技术 主要 使 用 CGI, 现 在 常用 的 动态 网 页 技术 有 ASP、JSP、 
PHP、ASP. NET 等 ,下 面 分 别 介绍 这 几 种 技术 。 

1. CGI 

在 互联 网 发 展 的 早期 ,动态 网 页 技术 主要 使 用 CGI( 共 用 网 关 接 口 ),CGI 程序 被 用 
来 解释 处 理 表单 中 的 输入 信息 ,并 在 服务 器 中 产生 对 应 的 操作 处 理 ,或 者 是 把 处 理 结果 返 
回 给 客户 端的 浏览 器 ,从 而 给 静态 的 HTML 网 页 添加 上 动态 的 功能 。 该 技术 的 基本 原 
理 是 将 浏览 器 提交 至 Web 服务 器 的 数据 通过 环境 变量 传递 给 其 他 外 部 程序 ,经 外 部 程序 
处 理 后 ,再 把 处 理 结果 传送 给 Web 服务 器 ,最 后 由 Web 服务 器 把 处 理 结果 返回 浏览 器 。 

CGI 程序 的 编程 比较 困难 、 效 率 低下 .而 且 修 改 维护 也 比较 复杂 ,所 以 在 一 段 时 间 以 
后 , CGT 逐渐 被 其 他 新 的 动态 网 页 技术 所 替代 。 

2. ASP 

ASP 是 微软 公司 推出 的 一 种 动态 网 页 语言 , 它 可 以 将 用 户 的 HTTP 请 求 传 人 到 ASP 
的 解释 器 中 ,这 个 解释 器 对 这 些 ASP 脚本 进行 分 析 和 执行 ,然后 从 服务 器 中 返回 处 理 的 结 
果 , 从 而 实现 了 与 用 户 交互 的 功能 .ASP 的 语法 比较 简单 ,对 编程 基础 没有 很 高 的 要 求 ,所 以 
很 容易 上 手 ,而 且 微软 提供 的 开发 环境 的 功能 十 分 强大 ,这 更 是 降低 了 ASP 程序 开发 的 难 
度 。 但 是 ASP 也 有 其 自身 的 缺点 。ASP 在 本 质 上 还 是 一 种 脚本 语言 ,除了 使 用 大 量 的 组 
件 ,没有 其 他 办 法 提高 效率 ,而 且 ASP 还 只 能 运行 在 Windows 环境 中 ,这 样 Windows 自身 
的 一 些 限制 就 制约 了 ASP 的 发 挥 ,这 些 都 是 使 用 ASP 无 法 回避 的 次 端 。 


3,- JSP 

JSP 全 称 为 Java Server Pages, Jé Jit Sun 公司 ( 现 已 被 收购 ) 倡 导 、 多 家 公司 参与 的 一 
种 Web 服务 技术 标准 。 它 的 主要 的 编程 脚本 为 Java 语言 ,同时 还 支持 JavaBeans/ 
Servlet 等 技术 ,利用 这 些 技术 可 以 建立 安全 、 跨 平台 的 Web 应 用 程序 。JSP 技术 具有 以 
下 优点 。 

1) 跨 平台 性 

由 于 JSP 的 脚本 语言 是 Java 语言 ,因此 它 具 有 Java 语言 的 一 切 特性 。 同 时 ,JSP 也 
支持 现在 的 大 部 分 平台 ,拥有 “一 次 编写 ,到 处 运行 "的 特点 。 

2) 执行 效率 高 

当 ISP 第 一 次 被 请 求 时 ,JSP 页 面 转换 成 Servlet. Servlet 本 身 就 是 一 个 Java BUT. 
然后 被 编译 成 * . class 文件 ,以 后 (除非 页 面 有 改动 或 Web 服务 器 被 重新 启动 ) 再 有 客户 
请 求 该 JSP 页 面 时 ,JSP 页 面 不 被 重新 编译 ,而 是 直接 执行 已 编译 好 的 *. class 文件 , 因 
此 执行 效率 高 。 

3) 可 重用 性 

可 重用 的 、 跨 平台 的 JavaBean 和 EJB(Enterprise JavaBean) 组 件 ,为 JSP 程序 的 开发 
提供 了 方便 。 例 如 ,用 户 可 以 将 复杂 的 处 理 程序 (如 对 数据 库 的 操作 ) 封 装 到 组 件 中 ,在 开 
发 中 可 以 多 次 使 用 这 些 组 件 ,提高 了 组 件 的 重用 性 。 

4) 将 内 容 的 生成 和 显示 进行 分 离 

使 用 JSP 技术 , Web 页 面 开 发 人 员 可 以 使 用 HTML 或 者 XML 标记 来 设计 和 格式 
化 最 终 页 面 。 生 成 动态 内 容 的 程序 代码 封装 在 JavaBean 组 件 `.EJB 组 件 或 JSP 脚本 段 
中 。 在 最 终 页 面 中 使 用 JSP 标记 或 脚本 将 JavaBean 组 件 中 的 动态 内 容 引 入 。 这 样 .可 以 
有 效 地 将 内 容 生 成 和 页 面 显示 分 离 ,使 页 面 的 设计 人 员 和 编程 人 员 可 以 同步 进行 工作 ,也 
可 以 保护 程序 的 关键 代码 。 

4. PHP 

PHP 与 JSP 类 似 , 都 是 可 以 将 动态 程序 嵌 套 到 在 HTML 中 的 ,不 同 之 处 在 于 ,PHP 
的 语法 比较 独特 ,在 其 中 混合 了 C Java 等 多 种 语法 的 优秀 部 分 ,而 且 PHP 网 页 的 执行 速 
度 要 比 CGI 和 ASP 等 语言 快 很 多 。 在 PHP 中 .提供 了 对 常见 数据 库 的 支持 ,例如 SQL 
Server, MySQL Oracle, Sybase 等 ,这 使 得 PHP 中 的 数据 库 操作 变 得 异常 简单 。 而 且 
PHP 程序 可 以 在 IIS 和 Apache 中 运行 ,提供 对 多 种 操作 系统 平台 的 支持 。 

但 是 PHP 也 存在 一 些 劣 势 ,例如 PHP 的 开发 运行 环境 的 配置 比较 复杂 ,而且 PHP 
是 开源 的 产品 ,缺乏 正规 的 商业 支持 。 这 些 因素 在 一 定 程 度 上 限制 了 了 PHP 的 进一步 
发 展 。 

5. ASP. NET 

ASP. NET 是 ASP 的 . NET 版 本 ,可 以 创建 动态 Web 页 面 .能 将 HTML 的 设计 和 
数据 检索 机 制 分 离 。 这 样 ,改变 HTML 设计 不 会 影响 数据 库 应 用 程序 。 类 似 地 ,服务 器 
脚本 确保 了 对 数据 源 进 行 修改 时 无 须 改动 HTML 文档 。ASP. NET 可 以 方便 快捷 地 从 
ADO. NET( 数 据 源 ) 访 问 数 据 。 
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ASP. NET 能 够 使 用 被 称 为 模板 的 编程 代码 集合 来 创建 HTML 文档 。 使 用 模板 的 
优点 是 可 以 在 HTML 文档 显示 给 用 户 之 前 ,将 从 数据 源 检 索 到 的 内 容 动态 插入 HTML 
文档 中 。 因 此 ,在 从 数据 源 检索 到 的 内 容 发 生变 化 时 不 需要 手动 修改 信息 。 

总 之 ,各 种 动态 语言 都 有 着 自身 的 优势 和 劣势 ,应 根据 客户 的 需求 来 选择 具体 的 语 
言 。 只 要 能 够 保证 系统 的 性 能 和 功能 ,选择 什么 语言 是 无 关 紧 要 的 。 


本 章 小 结 


在 本 章 内 容 中 ,对 Web 开发 中 的 一 些 基本 知识 进行 了 简单 的 介绍 ,读者 通过 本 章 的 
学 习 可 以 了 解 开发 Web 应 用 程序 的 一 些 基本 的 概念 ,了 解 Web 应 用 程序 的 概念 、 发 展 和 
运行 原理 ,熟练 掌握 Web 开发 中 C/S 与 B/S 模式 的 优 缺 点 及 两 者 的 区 别 , 熟 悉 静 态 网 页 
和 动态 网 页 的 区 别 并 对 几 种 动态 网 站 的 开发 技术 做 初步 的 了 解 。 


本 章 习 题 


一 、 选 择 题 

1. 早期 的 动态 网 站 开发 技术 主要 使 用 的 是 ( ) 技 术 。 该 技术 的 基本 原理 是 将 浏 
览 器 提交 至 Web 服务 器 的 数据 通过 环境 变量 传递 给 其 他 外 部 程序 ,经 外 部 程序 处 理 后 ， 
再 把 处 理 结果 传送 给 Web 服务 器 ,最 后 由 Web 服务 器 把 处 理 结果 返回 浏览 器 。 


A. JSP B. ASP C. PHP D. CGI 
2. 下 列 选项 中 不 属于 服务 器 端 动态 网 站 开发 技术 的 是 ( ) 。 
A. PHP B. ASP C. JavaScript D. JSP 


3. 下 列 动态 网 页 和 静态 网 页 的 根本 区 别 描述 错误 的 是 ( A 
A. 静态 网 页 服务 器 端 返回 的 HTML 文件 是 事先 存储 好 的 
B. 动态 网 页 服务 器 端 返回 的 HTML 文件 是 程序 生成 的 
C. 静态 网 页 文件 里 只 有 HTML 标记 ,没有 动态 程序 代码 
D. 动态 网 页 中 只 有 程序 ,不 能 有 HTML 代码 
4. 下 列 说 法 错误 的 是 ( ye 
A. 网 站 一 般 拥 有 固定 的 域名 
B. 通信 协议 包括 HTTP、FTP、Telnet 和 Mailto 等 协议 
C. WWW, 即 万 维 网 ,是 一 个 基于 超级 文本 的 信息 查询 工具 
D. HTML 是 一 种 用 来 制作 网 络 中 超级 文本 文档 的 简单 标记 语言 
5. Web 应 用 程序 体系 结构 可 分 为 三 层 , 不 属于 这 三 层 的 是 ( ) 


A. RRE B. 业务 层 C. 数据 访问 层 D. 网 络 链接 层 
二 、 填空 题 
1. Web 应 用 程序 开发 模式 分 为 和 两 种 。 





2. Web 应 用 中 的 每 一 次 信息 交换 都 要 涉及 和 两 个 层面 。 


Simo 概 述 





3. 静态 网 页 文件 里 只 有 ,没有 动态 程序 代码 。 

三 、 简 答题 

1. 什么 是 C/S 模式 ? 什么 是 B/S 模式 ? 试 简 述 两 种 模式 各 层 的 作用 并 比较 其 优 
缺点 。 


2. 什么 是 静态 网 站 ? 什么 是 动态 网 站 ? 试 比 较 它们 之 间 的 区 别 。 
3. 设计 动态 网 页 的 语言 都 有 哪些 ? 试 简要 比较 它们 的 异同 。 


第 2 章 HTML 静态 网 页 制作 基础 


在 网 站 设计 中 ,纯粹 HTML 格式 的 网 页 通常 被 称 为 “静态 网 页 ”, 它 的 文件 扩展 名 是 . 
htm 或 . html, 可 以 包含 文本 ,图像 .声音 、Flash 动画 、 客 户 端 脚本 和 ActiveX 控件 及 Java 小 
程序 等 。 静 态 网 页 是 网 站 建设 的 基础 ,早期 的 网 站 一 般 都 是 由 简单 静态 网 页 制作 的 。 静 态 
网 页 是 相对 于 动态 网 页 而 言 ,是 指 没有 后 台数 据 库 ,不 含 动态 程序 和 不 可 交互 的 网 页 。 

静态 网 页 更 新 起 来 相对 比较 麻烦 ,适用 于 一 般 更 新 较 少 的 展示 型 网 站 。 人 们 通常 会 
误 认 为 静态 页 面 都 是 静止 的 ,实际 上 静态 页 面 并 不 一 定 完全 是 静止 不 动 的 ,它们 也 可 以 出 
现 各 种 动态 的 效果 ,如 GIF 格式 的 动画 Flash、 滚 动 字幕 等 。 


2.1 HTML 语言 概述 





2.1.1 HTML 简介 


HTML 的 英文 全 称 是 Hypertext Marked Language, 即 超 文本 标记 语言 ,是 一 种 用 
来 制作 超 文本 文档 的 简单 标记 语言 。 超 文本 传输 协议 规定 了 浏览 器 在 运行 HTML 文档 
时 所 遵循 的 规则 和 进行 的 操作 。HTTP 协议 的 制定 使 浏览 器 在 运行 超 文本 时 有 了 统一 
的 规则 和 标准 ,用 HTML 编写 的 超 文本 文档 称 为 HTML 文档 , 它 能 独立 于 各 种 操作 系 
统 平台 , 自 1990 年 以 来 HTML 就 一 直 被 用 作 WWW( 是 World Wide Web 的 缩写 ,也 可 
简写 为 Web、 中 文 叫做 万 维 网 ) 的 信息 表示 语言 ,使 用 HTML 语言 描述 的 文件 ,需要 通过 
Web 浏览 器 显示 出 效果 。 

所 谓 超 文本 ,是 因为 它 可 以 加 入 图 片 . 声 音 、 动 画 、 影 视 等 内 容 , 事 实 上 每 一 个 HTML 
文档 都 是 静态 的 网 页 文件 ,这 个 文件 里 面包 含 了 HTML 指令 代码 ,这 些 指 令 代码 并 不 是 
一 种 程序 语言 , 它 只 是 一 种 排版 网 页 中 资料 显示 位 置 的 标记 结构 语言 ,易学 易 懂 , 非 常 简 
单 。HTML 的 普遍 应 用 就 是 带 来 了 超 文本 的 技术 一 一 通过 单 击 鼠 标 从 一 个 主题 跳 转 到 
另 一 个 主题 ,从 一 个 页 面 跳 转 到 另 一 个 页 面 与 世界 各 地 主机 的 文件 链接 。 


2.1.2 HTML 的 基本 结构 


HTML 语言 格式 : 


< 卷 标 名 称 属性 名 称 = 属 性 值 > 数据 内 容 < / 卷 标 名 称 > 
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如 : 
<body bgcolor="# 00FF99"> 您 好 < /body> 


一 个 HTML 文档 由 一 系列 的 元 素 和 标记 组 成 ,元 素 名 不 区 分 大 小 写 。HTML 用 
标记 规定 元 素 的 属性 和 它 在 文件 中 的 位 置 ,HTML 超 文本 文档 分 文档 头 和 文档 体 两 部 
分 ,文档 头 主要 是 对 这 个 文档 进行 一 些 必 要 的 定义 ,文档 体 中 才 是 要 显示 的 各 种 文档 

下 面 是 一 个 最 基本 的 HTML 文档 的 代码 : 


<html> 
<head> 
«meta http- equiv- "Content- Type" content- "text/html; charset=gb2312" /> 
«title» Bm title 的 内 容 < /title» 
€ /head» 
<body> 
n... 
< /body» 
</html> 
壹 HTML 二 一/HTML> 在 文档 的 最 外 层 ,文档 中 的 所 有 文本 和 html 标记 都 包含 在 
其 中 , 它 表示 该 文档 是 以 超 文本 标识 语言 (HTML) 编 写 的 。 实 际 上 ,现在 常用 的 Web 浏 
览 器 都 可 以 自动 识别 HTML 文档 ,并 不 强制 要 求 有 二 html 二 标记 ,也 不 对 该 标记 进行 任 
何 操 作 , 但 是 为 了 使 HTML 文档 能 够 适应 不 断 变化 的 Web 浏览 器 ,还 是 应 该 养 成 不 省 略 
这 对 标记 的 良好 习惯 。 
<HEAD></HEAD> 是 HTML 文档 的 头 部 标记 ,在 浏览 器 窗口 中 , 头 部 信息 是 
不 被 显示 在 正文 中 的 , 在 此 标记 中 可 以 插入 其 他 标记 ,用 于 说 明文 件 的 标题 和 整个 文件 
的 一 些 公共 属性 。 若 不 需 头 部 信息 则 可 省 略 此 标记 ,良好 的 习惯 是 不 省 略 。 
过 META 二 设 定 文件 的 附加 信息 。 如 charset — "gb2312" 表 示 网 页 内 容 编码 ,表示 使 
用 国标 的 汉字 编码 格式 。http-equiv 王 "contenttype" 和 content =" text/html" K 7s IS] HL 
的 内 容 格式 ,表示 网 页 的 内 容 格式 为 简体 网 页 的 形式 。 
<TITLE> fil </TITLE> Jt it $$ ft <HEAD> K Mp ic P HY bec Z al NY 3c A 
文档 标题 , 它 被 显示 在 浏览 器 窗口 的 标题 栏 。 
<BODY> </BODY> $KE — Bt A 15 We ,标记 之 间 的 文本 是 正文 ,是 浏览 器 要 显示 
的 页 面 内 容 。 属 性 列表 如 表 2-1 所 示 。 


表 2-1 body 属性 列表 




















属 性 说 明 及 举例 
bgcolor TG. body bgcolor 一 "# 00FF99"> 
background 背景 图 案 , <body background="url"> 
text 文本 颜色 ,一 body text=" #000000"> 
link 链接 文字 颜色 ,一 body text=" #000000"> 
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续 表 
属 性 说 明 及 举例 
alink 活动 链接 文字 颜色 ,一 body text=" # 000000"> 
vlink 已 访问 链接 文字 颜色 ,一 body text=" #000000"> 
leftmargin 页 面 左 侧 的 留 白 距离 ,二 body leftmargin="20"> 
topmargin 页 面 顶部 的 留 白 距离 ,二 body topmargin="20"> 





上 面 这 几 对 标记 在 文档 中 都 是 唯一 的 ,HEAD、TITLE、BODY fid t£ fe HTML 
标记 中 的 。 
例 2-1 网 页 基本 结构 简单 举例 。 
<HTML> 
<HEAD> 
<TITLE> 这 是 标题 < /TITLE> 
</HEAD> 


<BODY> 
这 是 文档 主体 ,正文 部 分 


</BODY> 

</BTML> 

这 是 一 个 最 简单 的 静态 网 页 的 基本 结构 ,在 录入 时 应 注意 : < >/ 等 字符 都 是 英文 
半角 字符 ,编辑 之 后 存盘 ,将 文件 名 定义 为 chap2_1. html 或 chap2_1. htm。 注 意 扩展 名 
一 定 是 . htm 或 . html, 不 能 是 . txt。 还 要 注意 存储 在 哪个 目录 下 。 建 议 读者 将 文件 存储 
在 专门 的 目录 中 。 在 存盘 时 需要 注意 : 在 “文件 名 ”文本 框 中 .输入 chap2_1. html 或 
chap2_1. htm; 在 “保存 类 型 "下 拉 列 表 框 中 .选择 “所 有 文件 ”; 在 “编码 "下拉 列表 框 中 , 保 
留 ANSI 的 设置 ;最 后 设置 完毕 , 单 击 “ 保 存 " 按 钮 即 可 。 

具体 设置 如 图 2-1 所 示 。 


























保存 在 加 :| 已 ht J osca 
我 最 近 的 文档 
Am 
e 
我 的 文档 
= 
à 
RSM: chap? 1. htl] ~“ C| 
保存 类 型 0) [所 有 文件 ~ ma) 
LIH [asr v 








图 2-1 基态 页 面 的 存储 
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在 设置 文件 名 时 ,有 时 视 操 作 系统 不 同 , 可 能 需要 加 上 双 引 号 ,注意 是 半角 的 双 引 号 ， 
这 是 为 了 保证 文件 的 扩展 名 必须 是 . htm 或 . html, 

存盘 完毕 ,在 当前 文件 夹 中 就 会 有 一 个 chap2_1. html 文件 ,双击 它 , 系 统 自动 会 用 浏 
览 器 打开 它 , 如 图 2-2 所 示 。 


JRM - Microsoft Internet Explorer 
RHO SEO FEW KRW IAD HHW 


O% -O-A A G| Pm sm © 


地 址 D) (E) C:\htal\chap2_1. htal 





这 是 文档 主体 ， 正 文部 分 





图 2-2 简单 静态 网 页 基本 结构 


2.2 常用 HTML 排版 标记 





对 于 HTML 页 面 ,文字 排版 标记 必 不 可 少 , 一 个 美观 大 方 的 文字 页 面 能 够 确切 地 传 
达 出 页 面 的 主要 信息 。 下 面 介绍 常见 的 HTML 语言 排版 标记 。 

1. 二 p 二 标记 

文本 分 段 一 般 以 二 p 二 开头 、 以 二 /p 二 结尾 。 段 落 标 记 二 p 二 是 HTML 中 最 常用 的 
标记 ,虽然 二 /p 二 可 以 省 略 , 因 为 下 一 个 二 p 记 的 开始 就 意味 着 上 一 个 二 p 二 的 结束 ,但 最 
好 还 是 遵循 规范 ,正规 书写 。 

去 p 二 标记 的 常用 语法 格式 为 

<p align= 对 齐 方式 > ...</p> 
其 中 ,align 用 来 定义 段落 的 对 齐 方式 , 它 可 以 取 以 下 值 : 

* center 居中 对 齐 。 
left 靠 左 对 齐 , 是 默认 值 。 
right 一 一 靠 右 对 齐 。 
2. 二 br 二 、 二 nobr 二 、 一 pre 二 和 二 center 二 标记 


段落 与 段落 之 间 一 般 会 空 出 一 行距 离 。 如 果 不 想 分 段 而 只 想 分 行 , 可 以 使 用 二 br 二 
标记 ,常用 格式 为 : 








<br> 


一 般 来 说 ,每 当 浏览 器 窗口 被 缩小 时 ,浏览 器 会 自动 将 段落 右边 的 文字 转折 至 下 一 
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行 。 所 以 编写 者 对 于 需要 断 行 的 地 方 .应 加 上 二 br 二 > 标记。 二 br 二 标记 仅仅 分 行 而 不 分 
Br. 需要 注意 的 是 ,二 br 二 不 是 成 对 出 现 的 ,也 就 是 说 ,没有 二 /br 二 。 

在 浏览 器 窗口 缩小 时 ,如 果 不 想 自动 折 行 ,可 以 使 用 一 nobr 之 和 二 /nobr 二 标记 , 格 
式 为 


<nobr> ...« /nobr» 


通过 各 种 标记 对 文字 进行 排版 时 ,如 果 要 保留 原始 排版 效果 ,例如 文本 中 的 空格 、 制 
表 符 等 都 要 保留 , 则 需要 使 用 一 pre 二 .二 /pre> 标 记 , 主 要 格式 为 


«pre width= 宽 度 wrap» ...< /pre> 


其 中 ,width 用 于 指明 每 行 的 最 大 字符 数 , wrap 说 明 可 以 折 行 ,默认 是 不 加 wrap ,也 就 是 
不 折 行 。 
例 2-2 ”一 nobr 二 和 一 pre 二 的 用 法 。 


<html> 
<head> 
<title>itsway - -段落 与 文字 < /title» 
</head> 
<body> 
<p><nobr> 三 更 灯火 五 更 鸡 , 正 是 男儿 立志 时 。 
黑 发 不 知 勤学 早 , 白 首 方 悔 读书 迟 。< /nobr>< /p> 
<p> F iii in pre 标 记 的 效果 :< /p> 


<pre> 
oo k k 
° o k k 
o o k k 
o kk 
o o k k 
o o k k 
oo k k 
</pre> 
<p> 下 面 是 不 加 pre 标 记 的 效果 :< /p> 
oo k k 
o o k k 
o o k k 
o o kk 
o o k k 
o o k k 
oo k k 
< /body» 
</html> 


显示 结果 如 图 2-3 所 示 。 
从 图 中 能 明确 看 出 二 nobr 二 和 一 pre 二 的 用 法 ,另外 ,如 果 要 把 显示 的 内 容 居 中 对 齐 ， 
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三 更 灯火 五 更 鸡 ， 正 是 男儿 立志 时 。 黑 发 不 知 勤学 早 ， 白 首 方 悔 访 
下 面 是 加 pre 标 记 的 效果 ， 


下 面 是 不 加 pre 标 记 的 效果 : 


ookkookkookkookkookkookkookk 





EI E 


图 2-3 <nobr>Al<pre> Hit íi th 


BA — 0] <center> , </center> rid. ERATE. MT DARPA: 

<center> 要 居中 对 齐 的 内 容 < /center> 

TE <center> fI — / center PRALE EL jit 8 XC A ,而 且 可 以 放置 图 像 . 表 格 等 其 他 各 
种 对 象 ,如 果 这 些 对 象 自身 没有 指明 对 齐 方式 ,那么 它们 都 居中 对 齐 。 

3. 二 hr 二 标记 

为 了 使 网 页 更 有 层次 感 ,可 以 使 用 水 平 线 标记 二 hr 二 ,语法 为 : 

<hr size= 宽 度 width= 长 度 align= 对 齐 方式 color= 颜 色 noshade> 

各 个 属性 的 说 明 如 下 : 
用 于 设置 水 平 线 的 宽度 ,以 像素 为 单位 ,默认 为 1。 
* width 一 一 水 平 线 的 长 度 , 可 以 以 像素 为 单位 ,如 100; 也 可 以 是 浏览 器 窗口 宽度 的 
百分比 ,如 8026 ,默认 为 100%。 
align 一 一 水 平 线 的 对 齐 方式 ,有 left right center 三 种 ,默认 为 center。 
color 指定 线条 颜色 。 颜 色 值 既 可 以 是 一 个 十 六 进 制 数 (最 好 用 # 作 前 绥 ) ,也 
可 以 是 颜色 名 称 ,默认 为 灰色 。 
线段 无 阴影 属性 ,为 实心 线段 ,默认 为 空心 线段 。 

过 hr> 是 一 个 单 标记 ,也 就 是 说 ,没有 对 应 的 本 /hr>。 

4. 二 hn 二 标记 

一 般 文章 都 有 标题 .副标题 . 章 和 节 等 结构 ,HTML 中 也 提供 了 相应 的 标题 标记 二 hn 二 
Al</hn> ,其 中 ”为 标题 的 等 级 。HTML 一 共 提 供 6 个 等 级 的 标题 , 即 二 hl 之 一 一 h6 二 。 
nn 越 小 ,标题 字号 就 越 大 ,主要 格式 为 : 

«hn align= 对 齐 方式 > ...</hn> 


其 中 对 齐 方式 有 left right; center 三 种 .默认 为 centers 
5. 文字 标记 
在 HTML 标记 中 ,有 两 个 标记 可 以 指定 字体 大 小 ,一 个 是 前 面 讲 过 的 二 hn> 标 记 , 还 有 





* size 








noshade 
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一 个 就 
强大 。 


是 一 font 标记 。 但 过 hn 标记 只 能 用 于 有 限 的 范围 ,而 二 font 标 记 的 功能 则 更 加 
另外 ,还 有 一 些 设置 字 体 某 个 特点 的 标记 ,如 过 strong 二 一 em 二 一 u>>、 一 sup 二 、 


<sub>, <strike> , code && fid «C f 1B A BO I o 
D 二 font 二 标记 
二 font 二 标记 的 主要 格式 为 : 


<font face= 字 体 类 型 size= 字 体 大 小 color= 颜 色 值 style= 样 式 >.. .< /font> 


其 中 ， 





face 一 一 指定 字体 类 型 ,如 宋体 .Times New Roman 等 。 但 只 有 对 方 的 计算 机 中 
装 有 相同 的 字体 , 才 可 以 在 其 浏览 器 中 出 现 你 预先 设计 的 风格 ,所 以 最 好 指定 常 
用 字体 。 


size 


设置 字号 ,默认 值 为 3。 可 以 在 size 属性 值 之 前 加 上 十 、 一 字符 ,指定 相 








对 于 当前 字号 值 的 增 量 或 减 量 。 

color 指定 字体 颜色 。 颜 色 值 既 可 以 是 一 个 十 六 进 制 数 (最 好 用 # 作 前 缀 ) ,也 
可 以 是 颜色 名 称 。 

style 指定 字体 样式 。 





2) <b> <i> ,<u> ,<strong> .<em>,<sup>.<sub>frid 
为 了 让 文字 富有 变化 ,或 者 为 了 着 意 强调 某 一 部 分 ,HTML 提供 了 一 些 标记 产生 这 
些 效果 ,常用 文本 格式 如 表 2-2 所 示 。 


表 2-2 常用 文本 格式 



































文字 标记 显示 效果 文字 标记 显示 效果 
<b> HF <strong> 重要 文字 ( 粗 体 ) 
<i> 斜体 字 <del> 删除 线 
<u> 底线 字 face 字体 样式 ,如 宋体 等 
<sup> ERF color 字体 颜色 
<sub> 下 标 字 <font> | size 字体 大 小 
<em> 重要 文字 (斜体 ) <font face— "AK fK"color— "green" 
Sek 加 横 线 size="20" > </font> 








特殊 符号 对 应 代码 如 表 2-3 所 示 。 


RIS 特殊 符号 对 应 代码 














符号 标记 显示 效果 符号 标记 显示 效果 
&-nbsp; 空 一 格 8-quot; = 
Ble; <= &.times; x 
& gt; = 
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例 2-3 HTML 常用 文本 格式 。 


<html> 
<body> 
«p»«b» KH bR. < /b>< /p><p><i> 斜 体 用 并 表示。< /i>< /p> 
<p><del> 想 唱 就 唱 < /del> 这 个 snbsp; gnbsp; gnbsp; 词 当中 划 线 表示 删除 。< /p> 
<p><ins> 唱 得 响亮 < /ins> 这 个 词 下 划 线 插入 。< /p> 
<p>X< sub» 2« /sub> 其 中 的 slt;2&gt; 是 下 标 < /p> 
<p>X< sup» 2< /sup> 其 中 的 squot;2&quot; 是 上 标 < /p> 
<p><font face=" 宋 体 "color="green" size= "20"> 我 是 font, 用 来 设置 < /font>< /p> 
< /body> 
</html> 


结果 如 图 2-4 所 示 o 


eese S olxlso P 
x @- 
次 wa 次 eum ~ e)amans~ e) 234590 


a- 9-2 m- 








PULTE. 
想 唱 就 唱 这 个 。” 词 当中 划 线 表示 删除 。 
唱 得 响亮 这 个 词 下 划 线 插入 。 
XB RET 
X2 其 中 的 “2“ 是 上 标 
我 是 font， 用 来 设置 

A 计算 机 | 保护 模式 .禁用 








图 2-4 常用 文本 格式 运行 结果 


2.3 HTML 图 片 


图 片 格式 有 很 多 种 ,在 网 络 中 使 用 的 图 片 格式 应 该 能 被 各 种 操作 系统 所 接受 才 行 。 
目前 ,在 网 上 流行 的 图 片 格式 以 GIF、JPEG 和 PNG 为 主 ,图 片 文件 一 般 要 经 过 压缩 , 否 
则 文件 太 大 不 利于 在 网 上 传输 。 它 们 的 简要 情况 介绍 如 下 : 

GIF 格式 。GIF 格式 的 图 像 文件 只 包含 256 色 , 因 此 色彩 表现 力 不 够 ,但 图 像 文件 可 
以 很 小 ,压缩 效率 高 。GIF 格式 适合 于 商标 .新闻 式 的 标题 ,还 可 以 形成 简单 的 动画 效果 。 
文件 的 扩展 名 为 . gif。 

JPEG 格式 。 照 片 之 类 的 全 彩 图 像 一 般 都 以 JPEG 格式 来 压缩 ,因此 JPEG 格式 常用 


irf 
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来 保存 超过 256 色 的 图 像 。 但 JPEG 的 压缩 过 程 会 造成 图 像 数据 的 损失 ,是 一 种 “有 损 压 
缩 ”。 不 过 视觉 上 一 般 不 易 察 觉 。 文 件 的 扩展 名 为 .jpg 或 . jpeg. 

PNG(Portable Network Graphics) 格式 。PNG 格式 是 Macromedia 公司 倡导 的 。 
PNG 图 像 格式 是 一 种 非 破坏 性 的 网 页 图 像 文件 格式 , 它 提 供 了 将 图 像 文件 以 最 小 的 方式 
压缩 , 却 又 不 造成 图 像 失真 的 技术 。 因 此 它 不 仅 具 有 GIF 图 像 格 式 的 大 部 分 优点 ,而 且 
还 支持 真 彩色 。 

有 了 图 像 文件 之 后 ,就 可 以 使 用 二 img 二 标记 把 图 像 插入 到 网 页 中 了 。 二 img 二 标记 
的 主要 语法 为 : 

<img src= 图 像 文 件 的 地 址 alt= 文 字 border= 边 框 宽度 width= 图 像 宽 度 height= 图 像 高 度 > 

各 种 属性 的 解释 如 下 : 

用 来 设置 图 像 文件 所 在 的 路 径 。 可 以 是 相对 路 径 ,也 可 以 是 绝对 路 径 。 

* alt 一 一 当 鼠 标 放 在 图 片上 时 ,显示 的 小 段 提示 文字 ,一般 用 于 说 明 此 图 片 的 标题 
或 主要 内 容 。 当 图 像 文件 无 法 在 网 页 中 显示 时 ,在 图 像 的 位 置 也 会 显示 alt 所 设 
置 的 文字 。 

border 一 一 图 像 边框 的 宽度 ,单位 是 像素 。 在 默认 情况 下 图 像 无 边框 , 即 border=0, 
width 和 height 一 一 图 像 的 宽度 和 高 度 ,单位 是 像素 。 在 默认 情况 下 ,如 果 改 变 其 
中 一 个 值 , 则 另 一 个 值 也 会 等 比例 进行 调整 ,除非 同时 设置 两 个 属性 。 

二 img 二 标记 还 有 三 个 比较 常用 的 属性 ,它们 是 : 

(1) align 属性 指定 图 像 和 周围 文字 的 对 齐 方式 。 图 像 的 绝对 对 齐 方 式 与 相对 
文字 的 对 齐 方 式 不 同 , 绝 对 对 齐 方式 包括 left、center 和 right 三 种 ,而 相对 文字 对 齐 方式 
则 是 指 图 像 与 一 行文 字 的 相对 位 置 。align 的 取 值 如 表 2-4 所 示 。 

表 2-4 align 的 取 值 





e sre 
































align 的 值 * x 

top 图 像 顶部 和 同行 文本 的 最 高 部 分 对 齐 ( 可 能 是 文本 顶部 ,也 可 能 是 图 像 顶 部 ) 
middle 图 像 中 部 和 同行 文本 的 中 部 对 齐 ( 通 常 是 文本 行 的 基线 ,并 不 是 实际 的 中 部 ) 
bottom 图 像 底部 和 同行 文本 的 底部 对 齐 

left 使 图 像 和 左边 界 对 齐 ( 文 本 环绕 图 像 ) 

right 使 图 像 和 右边 界 对 齐 ( 文 本 环绕 图 像 ) 

texttop 图 像 顶部 和 同行 中 最 高 的 文本 的 顶部 对 齐 , 仅 用 于 Netscape 

absmiddle 图 像 中 部 和 同行 中 最 大 项 的 中 部 对 齐 , 仅 用 于 Netscape 

baseline 图 像 底部 和 同行 的 文本 基线 对 齐 , 仅 用 于 Netscape 

absbottom 图 像 底部 和 同行 中 的 最 低 项 对 齐 , 仅 用 于 Netscape 








(2) hspace 属性 一 一 图 像 与 同行 文字 或 对 象 之 间 的 水 平 距离 ,单位 是 像素 。 
(3) vspace 属性 图 像 与 上 下 行文 字 或 对 象 之 间 的 垂直 距离 ,单位 是 像素 。 
例如 ,在 页 面 中 插入 如 下 代码 : 
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< IMG SRC= "image/myimage.jpg" alt=" 图 片 " WIDTE- "200" HEIGHT- "100" BORDER- "10"> 


运行 程序 后 在 页 面 中 显示 的 效果 如 图 2-5 所 示 。 





图 2-5 图 片 显示 效果 


在 页 面 中 image/myimage. jpg 是 相对 路 径 , 在 HTML 页 面 中 涉及 资源 文件 的 地 方 
(如 音乐 视频、 图片 等 ) 就 会 涉及 绝对 路 径 与 相对 路 径 的 概念 。 

(D 绝对 路 径 。 

绝对 路 径 是 指 文件 在 硬盘 上 真正 存在 的 路 径 。 例 如 bg. jpg 这 个 图 片 是 存放 在 硬盘 
ff) ^E; NbookNHTMLV 2 SE" AR F ABA bg. jpg 这 个 图 片 的 绝对 路 径 就 是 “下 :Nbook\ 
HTML 2 章 \bg. jpg”。 如 果 要 使 用 绝对 路 径 指定 网 页 的 背景 图 片 ,就 应 该 使 用 以 下 
语句 : 


<body background="E:\book\ HIML\ 第 2 章 \bg.jpg"> 


实际 上 ,在 网 页 编程 时 ,很 少 会 使 用 绝对 路 径 , 如 果 使 用 *E:\book\HTMIL\ 第 2 章 \ 
bg. jpg” 来 指定 背景 图 片 的 位 置 ,在 自己 的 计算 机 上 浏览 可 能 会 一 切 正常 ,但 是 上 传 到 
Web 服务 器 上 当 被 客户 端 浏览 时 就 很 有 可 能 不 会 显示 图 片 了 。 因 为 上 传 到 Web 服务 器 
上 时 ,可 能 整个 网 站 并 没有 放 在 Web 服务 器 的 下 盘 , 有 可 能 是 D 盘 或 H 盘 。 即 使 放 在 
Web 服务 器 的 下 盘 里 ,Web 服务 器 的 下 盘 里 也 不 一 定 会 存在 “E:\book\ HTML\ 第 2 
章 ” 这 个 目录 ,因此 在 浏览 网 页 时 是 不 会 显示 图 片 的 。 

© 相对 路 径 。 

为 了 避免 这 种 情况 发 生 ,通常 在 网 页 里 指定 文件 时 ,都 会 选择 使 用 相对 路 径 。 所 谓 相 
对 路 径 , 就 是 相对 于 自己 的 目标 文件 位 置 。 例 如 上 面 的 例子 ,网 页 文件 里 引用 了 bg. jpg 
图 片 ,由 于 bg. jpg 图 片 相对 于 网 页 来 说 ,是 在 同一 个 目录 的 ,那么 要 在 网 页 文件 里 使 用 以 
下 代码 后 ,只 要 这 两 个 文件 的 相对 位 置 没有 变 ( 也 就 是 说 ,还 是 在 同一 个 目录 内 ) ,那么 无 
论 上 传 到 Web 服务 器 的 哪个 位 置 , 在 浏览 器 里 都 能 正确 地 显示 图 片 。 


<body background= "bg.jpg"> 


再 举 一 个 例子 ,假设 网 页 文件 所 在 目录 为 “E:\book\ HTML\% 2 章 ”, 而 bg. jpg 图 
片 所 在 目录 为 “E:\book\ HTML\ 2 章 \img”, 那 么 bg. jpg 图 片 相对 于 网 页 文件 来 说 ， 
是 在 其 所 在 目录 的 img 子 目录 里 . 则 引用 图 片 的 语句 应 该 为 : 
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<body background- "img/bg.jpg"» 

注意 : 相对 路 径 使 用 “/” 字 符 作 为 目录 的 分 隔 字 符 , 而 绝对 路 径 可 以 使 用 “\” 或 “/” 字 
符 作 为 目录 的 分 隔 字 符 。 由 于 img 目录 是 “第 2 章 ” 目 录 下 的 子 目录 ,因此 在 img 前 不 用 
再 加 上 “/” 字 符 。 

在 相对 路 径 里 常 使 用 “.. /” 表 示 上 一 级 目录 。 如 果 有 多 个 上 一 级 目录 ,可 以 使 用 多 个 
“../” ,例如 “http: //www. cnblogs. com/” 代 表 上 上 级 目录 。 假 设 网 页 文件 所 在 目录 为 
“E:\book\ HTML \ 第 2 章 ”, 而 bg. jpg 图 片 所 在 目录 为 *E:\book\ HTML”, 那 么 bg 
.jpg 图 片 相 对 于 网 页 文件 来 说 ,是 在 其 所 在 目录 的 上 级 目录 里 , 则 引用 图 片 的 语句 应 
BH: 


<body background- ". . /bg. jpg"» 


2.4 i8 $t 接 


所 谓 超 链接 (hyperlink) ,就 是 当 单 击 某 个 字 或 图 片 时 ,就 可 以 打开 另 一 个 网 页 或 画 
面 。 它 的 作用 对 网 页 来 说 极其 重要 ,是 HTML 最 强大 和 最 有 价值 的 功能 。 超 链接 简称 
链接 (link)。 

超 链 接 的 语法 根据 其 链接 对 象 的 不 同 而 有 所 变化 ,但 都 是 基于 二 a 二 标记 的 ,主要 语 
法 为 

<ahref= 本 机 上 带 绝对 或 相对 路 径 的 文件 名 target= 目标 > ...< /a> 
或 者 : 

<a href- Internet 上 的 带 URL 的 文件 名 target= 目 标 >...</a> 


其 中 ,href 是 hypertext refernce( 超 文本 引用 ) 的 缩写 。target 用 于 指定 如 何 打开 链接 的 
网 页 ,有 以 下 几 个 值 : 
。 _blank 一 一 打开 一 个 新 的 浏览 器 窗口 显示 。 








e _self 用 网 页 所 在 的 浏览 器 窗口 显示 ,是 默认 设置 。 
* _parent 在 上 一 级 窗口 打开 .常用 在 框架 页 面 中 。 
* top 在 浏览 器 的 整个 窗口 打开 ,将 会 忽略 所 有 的 框架 结构 。 





在 a 二 和 二 /a 二 之 间 , 是 超 链接 要 显示 的 文字 或 图 片 。 当 用 户 把 鼠标 放 在 这 些 文字 
或 图 片上 时 ,一 般 来 说 鼠标 会 变 成 手 的 形状 ,此 时 单 击 文字 或 图 片 , 超 链接 就 会 发 生 作 
Hr. 

超 链接 还 可 以 用 来 发 电子 邮件 ,语法 为 : 


<a href= "mailto: 电 子 邮 件 地 址 "> 链接 的 文字 < /a> 


这 就 创建 了 一 个 自动 发 送 电子 邮件 的 链接 “mailto: ”( 注 意 其 中 有 一 个 半角 的 冒号 ) 
后 边 紧 跟 想 要 发 送 的 电子 邮件 的 地 址 ,例如 : 
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<a href- "mailto:webmastere 126.com"> 给 站 长 发 email« /a> 


单 击 该 超 链接 ,系统 就 会 打开 电子 邮件 发 送 软 件 ( 如 Outlook Express 或 Foxmail) , 
就 可 以 写 邮 件 并 发 送 了 。 
例 2-4 HTML 超 链接 。 


<html> 
<body> 
<p><a href-"http://www.baidu.com" title=" 百 度 "> 这 是 百度 的 链接 < /a>< /p> 
<P><a href= "http://www.baidu.com">< img src- "baidu.jpg"></a></p> // 图 片 超 
链接 
<a href="mailto:1234567@ 163.com"> 邮 箱 发 信 < /a> 
</p> 
< /body> 
</html> 


结果 如 图 2-6 所 示 。 





图 2-6 超级 链接 运行 结果 


在 浏览 网 页 时 经 常会 看 到 一 些 欢迎 信息 的 界面 ,在 经 过 一 段 时 间 后 ,这 一 页 面 会 自动 
跳 转 到 其 他 页 面 中 ,这 就 是 网 页 的 跳 转 。 使 用 http-equiv 属性 的 refresh 值 可 以 轻松 实现 
这 一 功能 ,格式 为 : 


«meta http- equiv- "refresh" content= " 跳 转 时 间 ; url= 链 接地 址 "> 


在 该 语法 中 ,refresh 表示 网 页 的 刷新 , 跳 转 时 间 以 秒 为 单位 ,url 是 在 经 过 若干 秒 后 
跳 转 到 的 新 网 页 地 址 。 例 如 : 


<meta http- equiv= "refresh" content="5; url=http://www.baidu.com"> 


会 在 5 秒 后 自动 跳 转 到 www. baidu. com, 


2.5 HTML 列 X 





列表 (List) 是 一 种 常用 的 数据 排列 方式 , 它 以 条 列 式 的 模式 来 显示 数据 ,使 读者 能 一 
目 了 然 。 在 HTML 有 三 种 列表 ,分 别 是 无 序列 表 (unordered list), A Jf 9l X (ordered 
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list) 和 定义 列表 (definition list) 。 
1. 无 序列 表 


无 序列 表 是 一 种 不 编号 的 列表 方式 ,而 在 每 一 个 项 目 文字 之 前 ,用 符号 作为 分 项 标 
识 ,最 常用 的 符号 是 圆 黑 点 。 常 用 语法 为 : 


<ul type= 符 号 类 型 > 
«li»8 1 项 
<1i> 第 2 项 
<1i> 第 n 项 
</ul> 
JE 90 6 H — ul JF M 1 PET NL JF M ea </ul> BE 


在 默认 情况 下 ,无 序列 表 的 项 目 符号 是 “@@”, 但 通过 type 属性 可 指定 项 目 符号 ,其 值 
有 三 个 ,分 别 是 : 


* disc 





sti us Hope ee. 
空心 加 符号“O”。 
BIE 





* circle 





* square 

2. 有 序列 表 

有 序列 表 中 的 每 个 列表 项 使 用 编号 ,而 不 是 符号 来 进行 排列 ,以 表示 顺序 性 ,一 般 采 
用 数字 或 字母 作为 顺序 号 。 常 用 语法 为 ; 

<ol type= 符 号 类 型 start= 起 始 数 字 > 


<1i> 第 1 项 
<1i> 第 2 项 


<1i> 第 n 项 
</ol> 
TH FE NBS <ol> FF lif BE 9 de <S A, BT HA </ol> BK 


在 默认 情况 下 ,无 序列 表 的 编号 是 阿拉 伯 数 字 , 但 通过 type 属性 可 指定 编号 ,其 值 有 
5 个 ,分 别 是 : 


* 1( 阿 拉 伯 数字 1) 一 一 用 1、2、3、4、…… 编 号 。 
用 小 写 英文 字母 a、b、c、d、…… 
。 A 一 一 用 大 写 英文 字母 A、B.C、D、…… 编 号 。 
用 小 写 罗 马 数字 i\ii\iii\iv、…… 编 号 。 
*I—HBHÁASESdrzlI. mV. 编号 。 
在 默认 情况 下 ,有 序列 表 的 列表 项 从 1 开始 编号 ,但 通过 start 属性 可 设置 起 始 数值 ， 
它 不 仅 对 数字 起 作用 .而且 对 英文 和 罗马 字母 也 起 作用 。 
3. 定义 列表 





oa 








e 


定义 列表 通常 用 于 术语 的 定义 , 它 包含 两 个 层次 的 列表 ,第 一 层次 是 需要 解释 的 名 
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词 ,第 二 层次 是 具体 的 解释 。 常 用 语法 为 : 


«dl» 
<dt> 1 项 <dd> 解 释 1 
<dt> 第 2 项 <dd> 解 释 2 


<dt> 第 n 项 <dd> 解 释 n 
</dl> 


定义 列表 由 二 dl 六 开始 ,每 个 列表 项 由 二 dt 二 开始 ,列表 项 的 解释 由 二 dd 之 开始 ,最 
后 由 到 /dl 结束 。 
例 2-5 HTML 列表 标记 。 


<html> 

<body> 

«ol type- "1" start="50"> 
<1i> 咖 罪 < /1i> 
<1i> 牛 奶 < i» 
<1i> 茶 < /1i> 

</ol> 


J C:\Documents and Settings\Ad... 


xi sao seo tema) IA” Q 


Sub types discs 地 址 四) Bra 
«lix ni» 


<li> AR </li> 
bmi ni» 
<1i> 橘 子 < /1i> 

</ul> 

< /body> 

</html> 


运行 结果 如 图 2-7 所 示 。 








2-7 列表 标记 运行 结果 


2.6 HTML 表格 





HTML #4 <table> ds, — 4 f n] LA BUR e 17 Crow) .用 二 tr 二 表示 ;每 行 
又 可 以 分 成 很 多 单元 格 (cell) ,用 二 td 二 表示 。 这 三 对 标记 是 创建 表格 最 常用 标记 ,需要 
统一 使 用 ,语法 为 : 


<table> 
<i> 
<td> 单 元 格 内 的 文字 < /td> 
<td> 单 元 格 内 的 文字 < /td> 


<td> 单 元 格 内 的 文字 < /td> 


</tr> 
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«tr» 
<td> 单 元 格 内 的 文字 < /td> 
<tq> 单 元 格 内 的 文字 < /td> 


<td> 单 元 格 内 的 文字 < /td> 


</tr> 


</table> 


也 就 是 说 ,在 一 table> </table> rid PARE <tr> .</ uw rid. E <tr>, </tr> bk 


dU PEE 二 /td 标记 。 


1. <table> frie 
<table> fy ic HP HRERS e FP AE dE Ze HE KER. WAARIN : 


«table align= 对 齐 方式 bgcolor= 表 格 背景 色 border= 边 界 宽度 bordercolor= 边 界 颜 色 height 
= 表格 高 度 width= 表 格 宽度 cellpadding=n cellspacing-n» 


</table> 


其 中 各 属性 的 含义 如 下 : 
* align 表格 在 上 一 层 容 器 控件 中 的 对 齐 方式 ,有 center left right 三 个 值 ,其 中 





left 是 默认 对 齐 方式 。 

设置 表格 的 背景 色 , 默 认 是 上 级 容器 的 背景 色 。 

表格 线 的 宽度 ,单位 是 像素 ,默认 值 是 1。 

bordercolor 一 一 设置 表格 线 的 颜色 。 如 果 没 有 包含 border 属性 ,或 者 border Ji 
性 值 是 0, 则 忽略 此 属性 值 。 

height 一 一 表格 的 高 度 ,以 像素 或 页 面 高 度 的 百分比 为 单位 。 但 如 果 表 格 内 容 大 
于 设置 的 高 度 , 则 表格 会 自动 扩张 ,以 便 容 纳 所 要 显示 的 内 容 。 

width 一 一 表格 的 宽度 ,以 像素 或 页 面 宽度 的 百分比 为 单位 。 但 如 果 表 格 内 容 大 
于 设置 的 宽度 , 则 表格 会 自动 扩张 ,以 便 容 纳 所 要 显示 的 内 容 。 

cellpadding 一 一 单元 格 内 部 所 显示 的 内 容 和 表格 线 的 距离 ,单位 是 像素 。 
cellspacing 一 一 表格 线 的 “厚度 ”, 单 位 是 像素 或 百分比 。 
background 一 一 定义 表格 的 背景 图 案 。 一 般 选 浅 颜色 的 图 案 。 此 属性 不 要 与 
bgcolor 同 用 。 

bordercolorlight 一 一 表格 边框 向 光 部 分 的 颜色 ,只 适用 于 TE 浏览 器 。 如 果 忽 略 
border 属性 或 border 属性 值 为 0, 则 此 属性 不 起 作用 。 

bordercolordark 表格 边框 背光 部 分 的 颜色 ,只 适用 于 IE 浏览 器 。 如 果 忽 略 
border 属性 或 border 属性 值 为 0, 则 此 属性 不 起 作用 。 使 用 bordercolorlight 或 
bordercolordark Hf . bordercolor 将 会 失效 。 

2. 二 tr 二 标记 


用 一 table> 标 记 可 以 设置 整个 表格 的 属性 。 如 果 要 设置 表格 各 行 的 属性 ,就 需要 详 





bgcolor 





border 
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细 了 解 过 tr 之 标记 的 各 个 属性 了 。 到 tr 标记 的 常用 语法 格式 为 : 
«tr align= 对 齐 方式 valign= 垂 直 对 齐 方式 height= 行 高 background= 背 景 图 案 bgcolor= 背 景色 


bordercolor= 边 界 颜色 bordercolordark= 边 界 背 光 部 分 的 颜色 bordercolorlight= 边 界 向 光 部 分 的 
颜色 > 


</tr> 
可 以 看 出 ,二 tr 二 的 很 多 属性 和 二 table 二 的 相应 属性 是 一 样 的 。 所 不 同 的 是 ,二 table 二 
的 各 个 属性 ,设置 的 是 整个 表格 的 显示 情况 ,而 二 tr 二 属性 只 用 于 设置 相应 行 的 显示 情况 。 
当 过 tr 二 属性 值 的 设置 和 二 table 二 的 同名 属性 值 不 同时 ,以 二 tr 二 属性 值 为 准 。 也 就 是 说 ， 
低层 的 属性 设置 会 “屏蔽 ”高层 属 性 。 
三 tr 之 标记 的 一 些 和 < 二 table 二 不 同 的 属性 的 含义 如 下 ; 
* align 文本 在 单元 格 中 的 水 平 对 齐 方式 ,有 center, left, justify, right 四 个 值 ， 
其 中 left 是 默认 对 齐 方式 justify 是 指 在 单元 格 中 合理 调整 内 容 , 以 恰当 显示 。 
。 valign 一 一 文本 在 单元 格 中 的 垂直 对 齐 方式 ,有 baseline、top、middle、bottom 四 个 
值 ,默认 值 是 middle, 即 垂直 居中 对 齐 。baseline 是 指 单 元 格 中 内 容 以 基线 
(baseline) 为 准 , 垂 直 对 齐 . 它 类 似 于 bottom( 底 端 对 齐 )。 
和 二 table 之 中 的 相应 属性 类 似 ,bordercolorlight 和 bordercolordark 属性 是 IE 浏览 
器 的 独 有 属性 ,并 且 它 们 会 屏蔽 bordercolor 属性 。 但 在 其 他 浏览 器 中 ,bordercolorlight 
和 bordercolordark 属性 不 起 作用 。 
3. 二 td 二 标记 
去 td 标记 的 常用 语法 格式 为 : 





«td width= 宽 度 height= 高 度 align= 水 平 对 齐 方式 valign= 垂 直 对 齐 方式 height= 行 高 
background= 背 景 图 案 bgcolor= 背 景色 bordercolor= 边 界 颜 色 bordercolordark= 边 界 背光 
部 分 的 颜色 bordercolorlight= 边 界 向 光 部 分 的 颜色 colspan= 跨 列 数 rowspan= 跨行 数 


nowrap> 

</td> 

可 以 看 出 ,一 td 的 很 多 属性 和 到 table> 到 tr 二 的 相应 属性 是 一 样 的 。 所 不 同 的 
是 ,二 table 二 、 二 tr 二 的 各 个 属性 ,设置 的 是 整个 表格 或 某 一 行 的 显示 情况 ,而 二 td 二 属性 
只 用 于 设置 相应 单元 格 的 显示 情况 。 当 二 td 二 属性 值 的 设置 和 二 table 二 、 一 tr 二 的 同名 
属性 值 不 同时 ,一 般 以 二 td 二 属性 值 为 准 。 但 也 有 例外 ,例如 ,在 二 tr 二 中 已 经 设置 了 行 
的 高 度 height 属性 值 , 则 在 行 的 二 td 二 中 设置 的 行 高 height 值 如 果 和 二 tr 二 中 设置 的 不 
同 , 以 二 tr 二 中 设置 的 行 高 为 准 , 除 非 该 行 的 所 有 单元 格 都 设置 了 同一 个 height 属性 值 。 

三 td 请 标记 的 一 些 和 二 table> 或 过 tr 二 不 同 的 属性 的 含义 如 下 : 
该 单元 格 在 水 平方 向 上 跨 的 列 数 ,默认 为 1。 
* rowspan 该 单元 格 在 垂直 方向 上 跨 的 行 数 ,默认 为 1。colspan 和 rowspan 是 

为 制作 复杂 表格 准备 的 ,具体 使 用 见 下 面 的 例子 。 





* colspan 
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© nowrap 一 一 如 果 单 元 格 中 的 内 容 超过 了 单元 格 的 宽度 , 则 用 此 属性 禁止 内 容 折 行 
显示 。 


例 2-6 HTML 表格 应 用 。 


<html> 
<head> 

<title> 表 格 范例 < /title> 

</head> 

<body> 

<center> 

<p><font face="## fk _GB2312" size="5" color="# 800080"> 商 品 一 览 表 < /font>< /p> 
<table border="0" width="291"> 

<tr> 

«th width- "112" align="left"> <font size="2"> 商 品名 称 < /font> « /th> 
«th width="72">< font size="2"> 单 位 < /font>< /th> 

«th width="87" align- "right"»« font size="2"> 单 价 < /font>< /th> 

</tr> 

<tr> 

«td width="112">< font size= "2"> 背 投 电视 机 < /font>< /td> 

<td align="center" width= "72">< font size="2"> 台 < /font> 

<td align="right" width= "87">< font size="2">$ 13, 699< /font> 

</tr 

<tr> 

<td width="112">< font size="2"> 三 门 冰箱 < /font>< /td> 

<td align="center" width= "72">< font size= "2"> 台 < /font» 

<td align="right" width= "87">< font size="2">$ 2, 699< /font> 

</tr> 

<tr> 

«td width="112">< font size= "2"> 全 自动 洗衣 机 < /£ont» « /td> 

<td align="center" width= "72">< font size= "2"> 台 < /font> 

<td align="right" width= "87">< font size="2">$ 4,188< /font> 

</tr> 

</table> 

<p><font face- "楷体 _GB2312" color="# 0000FF" size= "5"> 员 工 表 < /font>< /p> 
«table border- "1" width= "50% "> 

<tr> 

«th width= "25%" align- "center"»« font size="2"> Mt % < /font>< /th> 

«th width- "20$ " align="center">< font size= "2"> 性 别 </font>< /th> 

«th width= "20%" align="center">< font size= "2"> 年 龄 < /font>< /th> 

«th width="35% " align="center">< font size= "2"> 联 系 电话 < /font>< /th> 
</tr> 

<tr> 

<td width="25%" align="center">< font size="2">Jerry< /font>< /td> 
<td width="20%" align="center">< font size="2"> $< /font>< /td> 
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<td width- "20$ " align- "center"»« font size= "2"> 6< /font>< /td> 

<td width- "35$" align="center">< font size= "2"> 88765699« /font>< /td> 
</tr> 

«tr» 

<td width- "25$" align="center">< font size- "2"» Bonni« /font>< /td> 
«td width- "20$ " align- "center"»« font size- "2"> 女 </font>< /td> 

<td width- "20$ " align- "center" « font size- "2"> 7« /font>< /td> 

<td width- "35$" align="center">< font size- "2"> 88562158« /font>< /td> 
</tr> 

«tr» 

<td width- "25$ " align- "center" « font size="2">Kimi< /font>< /td> 
<td width- "20$ " align- "center"»« font size="2"> < /font» « /td> 

<td width= "20$ " align- "center" « font size- "2"> 7« /font>< /td> 

<td width- "35$ " align- "center" « font size- "2"> 64322108< /font» « /td> 
</tr> 

</table> 

</center> 

</body> 

</html> 


显示 效果 如 图 2-8 所 示 。 




















商品 名 称 单位 单价 
背 投 电视 机 台 $13, 699 
Eki 台 $2, 699 
全 自动 洗衣 机 台 $4, 188 
a 
员工 表 
姓名 性 别 Ej 联系 电话 
Jerry 5 6 88765699 
Bonni * 1 88562158 
Kini 5 7 64322108 


















































图 2-8 table 标记 运行 结果 


2.7 表单 的 使 用 


表单 (Form) 是 实现 图 形 用 户 界面 的 基本 元 素 , 它 包括 按钮 .文本 框 , 单 选 框 , 复 选 框 
等 ,它们 是 HTML 实现 交互 功能 的 主要 接口 。 程 序 通 过 表单 向 服务 器 提交 用 户 数据 。 
表单 的 使 用 包括 两 个 部 分 : 一 部 分 是 用 户 界面 ,提供 用 户 输入 数据 的 组 件 ; 另 一 部 分 是 处 
理 程序 ,可 以 是 客户 端 程序 ,在 客户 端的 浏览 器 中 执行 ;也 可 以 是 服务 器 端 程序 ,在 服务 器 
端 执行 ,无 论 是 在 客户 端 还 是 在 服务 器 端 处 理 用 户 提交 的 数据 ,都 需要 将 处 理 结果 返回 到 
浏览 器 中 。 本 节 介绍 如 何 用 HTML 生成 用 户 界 面 。 对 于 处 理 用 户 提交 的 数据 涉及 的 
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JavaScript 和 JSP 程序 设计 ,将 在 后 续 章 节 中 讲解 和 练习 。 
例 2-7 设计 一 个 表单 示例 程序 ,定义 一 个 简单 的 用 户 注册 界面 。 


form 1.htm: 
<html> 
<head> 
<meta http- equiv- "Content- Type" content= "text/html; charset=GBK"> 
<title> 表 单 </title> 
<body> 
< form name- "£1" method="post" action= "XXX.jsp"> 
<table width= "100$ " borde- "0" cellpadding- "0" style="font- size:12px;"> 
<caption> JH F tk lE « /caption> 
<tr> 
<td align="right"> H] P 4&4 :« /td> 
«td align-"left"»« input type="text" name- "t1"»« /td> 
</tr><tr> 
<td align="right"> #9 :< /td> 
<td align="left"> <input type="password" name="t2">< /td> 
</tr><tr> 
<td align="right"> Pü A HW :< /td> 
<td align="left">< input type= "password" name- "t3">< /td> 
</tr><tr> 
<td align="right"> ESI] :« /td> 
<td align="left"> 
«input type="radio" name="rl" value- "Jj" checked» $ 
«input type="radio" name- "rl" value- " 女 "> 女 </td> 
</tr><tr> 
<td align="right"> # :< /td> 
<td align="left"> 
<input type="checkbox" name= "cl" value= "音乐 "> 音乐 
<input type="checkbox" name= "c2" value= "美术 "> 美术 
<input type="checkbox" name- "c3" value= "旅游 "> 旅游 
</td> 
</tr><tr> 
<td align="right"> E-Mail:< /td> 
<td align="left">< input type="text" name="t4">< /td> 
</tr><tr> 





«td align="right">< input type="submit" value= "提交 "></td> 
<td align="left">< input type- "reset" value- "H $ "></td> 


< /tr» € /table» « /form < /div>< /body>< /html> 
form 1. htm 是 一 个 表单 示例 程序 .在 该 程序 中 .一 form 二 标记 的 属性 name— "f£1"J& 


该 表单 的 名 称 ;method 王 "post" 是 向 服务 器 提交 用 户 数据 的 方式 .也 可 以 是 method = 
"get". get 和 post 的 区 别 是 ,get 是 把 要 上 传 的 数据 加 到 表单 action 属性 所 指 的 URL 中 ， 
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上 传 时 用 户 在 URL 地 址 栏 中 可 以 看 到 提交 的 内 容 , 因 此 一 些 登 录 信息 ,如 用 户 名 和 密码 
等 就 会 显示 在 地 址 栏 中 ,安全 性 低 ;post 是 通过 HTTP post 机 制 , 将 上 传 的 数据 放置 在 
HTML HEADER 内 一 起 传送 到 action 属性 所 指 的 URL 地 址 ,用 户 看 不 到 这 个 过 程 ,在 
地 址 栏 中 也 不 会 显示 这 些 数据 , 另 一 个 方面 ,由 于 get. 方式 传输 的 数据 量 非常 小 ,一 般 限 
WTE 2KB 左右 ,所 以 表单 提交 建议 使 用 post 方式 ;action 二 "XXX. jsp" 表 示 数 据 向 服务 
器 提交 时 ,服务 器 端 要 执行 XXX. jsp 程序 ,XXX. jsp 可 以 获取 客户 端 传 来 的 数据 进行 应 
用 处 理 。 

一 form 之 标记 中 上 传 的 数据 是 用 二 input 过、 一 textarea 二 一 select 二 等 标记 定义 的 ， 
这 些 标记 中 的 属性 name 和 value 的 值 是 成 对 出 现 。form_1. htm 程序 中 ,一 input 二 的 属 
性 type— "text" EX T — X As fij A ÍT ; type=" password" E X. T — 47 985 83 3c A sj A £7 «fi 
入 的 文字 显示 在 输入 框 中 以 * 号 代替 ;type =" radio" aE AY dè 9&3 HE AA, type = 
"checkbox" 定义 的 是 复 选 框 ,checked 参数 表示 初始 为 选中 状态 ;type= " submit "定义 的 
是 提交 按钮 , 单 击 此 按钮 则 上 传 数据 并 执行 action 属性 指定 的 程序 ;type="reset" 定 义 的 
是 清除 按钮 , 单 击 此 按钮 则 输入 的 数据 全 部 清空 。 二 input 二 的 type 属性 还 可 以 是 type= 
"button" ,这 是 普通 按钮 。 

MH input MG tE type=" file" AY, form 标记 的 属性 enctype 的 值 取 为 multipart/ 
form-data, 表 示 要 上 传 文件 。 例 如 : 

< form enctype- "multipart/form- data" action= "XXX.jsp" method= "post"> 

传送 该 文件 到 服务 器 :< input type- "file" name- "myfile"> 
<input type="submit” value= "发 送 文件 "> 

</form> 

使 用 “记事 本 ”输入 form. 1. htm 程序 并 存放 在 应 用 目录 中 。 在 浏览 器 中 浏览 就 会 显 
示 如 图 2-9 所 示 的 页 面 。 


icr 





图 2-9 form 1 简单 的 用 户 注 册 界 面 


Bl 2-8 编写 一 个 表单 示例 程序 .定义 一 个 如 图 2-10 所 示 简 单 的 员工 管理 录入 界面 。 
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Internet Explorer 


[E] beep: //192. 168.2. 1 :8080/E_forn_2. hta 


姓名 : [一 一 一 性别; FF 出生 6 期 , 一 年 [一 有 一 日 


ti: 电话 
简历 ， 








图 2-10 form_2. htm 一 个 简单 的 员工 管理 录入 界面 


form_2.htm: 


«html» 

<head> 

<meta http- equiv= "Content- Type" content- "text/html; charset=GBK"> 
<title> 表 单 < /title> 

< /head» 

<body> 

<div align="center"> 





< form name- "f1" method= "post" action= "XXX.jsp"» 
< table border="0" width="100%" align="center" cellspacing="0" cellpadding= "2" 


bordercolor- "red"> 


«tr» 

<td width= "100$ "> 

姓名 :< input type="text" size- "15" name- "Name" /> &nbsp; &nbsp; 

性 别 :< select name= "S1"» « option value- "Jj ">B < /option» < option value- "At ">< /option 


></select> 


> 日 


&nbsp; &nbsp; Hi ^E H Hj :« input type="text" size="6" name- "Yl" /> 年 
«input type="text" size- "3" name- "Ml" /> 月 < input type="text" size- "3" name- "Dl" / 


«td» 

«tr» 

</table> 

<table border- "0" width= "100%" cellspacing- "0" cellpadding="2" bordercolor 


="red"> 


<tr><td width="100% "> 

住址 :< input type="text" size="56" name= "Addl" /> &nbsp; nbsp; 

电话 :< input type="text” size- "12" name- "Tell" /> 

<td><tr> 

</table> 

<table border- "0" width= "100%" cellspacing- "0" cellpadding- "2" bordercolor 


=“red"> 


<tr><td width= "100% "> 
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简历 :<br> 

<textarea name- "Tl" rows-"3" cols-"76"»« /textarea> 
<td><tr> 

</table> 

</form> < /div» 

< /body> 

« /html» 


form 2. htm t, f — 4 38 "fuz Oi) FEF. E ERG T <textarea> XC As fij A f£, — select F 
拉 菜 单 (或 称 “ 选 择 框 ”) 标 记 的 使 用 。 在 form 2. htm 程序 中 


<select name="S1"> 
<option value=" "> $ < /option» 
<option value=" "» *t« /option> 
</select> 


表示 有 男 、 女 两 个 下 拉 菜 单项 ,以 下 拉 方 式 显示 菜单 项 ,菜单 项 只 能 单 选 。 
使 用 “记事 本 ”输入 上 面 的 form_2. htm 程序 并 存放 在 应 用 目录 中 。 在 浏览 器 中 浏览 
就 会 显示 如 图 2-10 所 示 的 页 面 。 


2.8 使 用 frame 框架 分 割 浏览 器 窗口 





框架 (Frame) 最 主要 的 功能 是 用 来 分 割 页 面 窗口 ,使 每 个 “小 窗口 "能 显示 不 同 的 
HTML 文件 。 这 样 的 页 面 结构 称 为 框架 结构 的 页 面 , 而 这 些 * 小 窗口 就 被 称 为 框架 的 
SAL ER, 

框架 又 常 被 称 为 帧 。 利 用 框架 可 以 将 浏览 器 窗口 分 割 成 多 个 相互 独立 的 区 域 ,每 个 
区 域 可 以 显示 独立 的 HTML 页 面 。 用 志 frameset 二 标记 划分 区 域 ,用 二 frame 二 标记 定 
义 各 区 域 要 执行 的 程序 。 框 架 的 基本 语法 如 下 : 

<frameset cols= 列 划分 方式 rows= 行 划分 方式 > 


«frame src=HIML 文 件 1 name= 框 架 名 1> 
«frame src=HIML 文 件 2 name= 框 架 名 2> 


«frame src=HIML 文 件 n name= 框 架 名 n> 


</frameset> 


HEAR AY P E ba ak Je <frameset> fI — / frameset > . i XE fp ak FAK EM ECA AL 
个 帧 ,并 且 各 个 帧 是 如 何 排列 的 ,定义 的 方法 是 使 用 cols 属性 或 rows 属性 ,cols 属性 值 
用 来 垂直 分 割 窗 口 ,rows 属性 值 用 来 水 平分 割 窗口 。 使 用 一 frameset 二 标志 时 .这 两 个 属 
性 必须 至 少 选择 一 个 .否则 浏览 器 只 显示 第 一 个 定义 的 帧 。 

rows 和 cols 的 属性 值 可 以 是 百分数 .像素 值 或 星 号 * * ”, 其 中 星 号 代表 那些 未 被 说 
明 的 空间 , 即 除了 已 说 明 的 部 分 后 的 剩 下 所 有 的 。 同 时 ,所 有 的 帧 按照 rows 和 cols f fi 
从 左 到 右 、 从 上 到 下 排列 。 
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一 frame 二 标志 放 在 二 frameset 二 一 /frameset 二 之 间 , 用 来 定义 某 一 个 具体 的 框架 。 
<frame> pak AG sre 和 name 属性 ,这 两 个 属性 一 般 都 需要 赋值 。src 是 此 框架 要 显示 
的 HTML 文件 名 (包括 路 径 ) ,name 是 此 框架 的 名 字 , 这 个 名 字 是 用 来 供 超 链 接 标志 二 a> 
使 用 的 。 

例 2-9 使 用 frame 框架 技术 实现 图 2-11 所 示 页 面 的 内 容 。 


http: //192. 168. 2. 1-8080/ frame, htm 


4E. a: BE eee. [一 年 [一 月 一 日 
mir — ——— — —— — ——] Mim E——3 











图 2-11 框架 分 割 浏览 器 窗口 


具体 实现 代码 如 下 : 


frame.htm: 
<html> 
< frameset rows="40, * " id="FS1" frameborder="1" bordercolor- "red" framespacing- "1" 


<frame src= "Title.htm" name- "Fl" scrolling="no" noresize> 
< frameset cols="16%, * " id="FS1" frameborder="1" bordercolor=" yellow" 
framespacing- "1"> 
X frame src-"navigator.htm" name- "F2" scrolling- "auto" noresize> 
X frame src-"" name- "F3" scrolling- "auto" noresize> 
</frameset> 
</frameset> 
</html> 
Title.htm: 
<html> <head> 
<meta http- equiv- "Content-Type" content= "text/html; charset=GBK"> 
<title> 标 题 < /title> 
</head> 
<body> 
<center> 
<span style="font- size:22px;color:# 900;font- family: "华文 行 楷 ' ;padding- top:10;"> 
电子 商务 管理 平台 < /span> 
</center> 
< /body>< /html> 
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navigator .htm: 
<html> <head> 
«meta http- equiv- "Content-Type" content= "text/html; charset=GBK"> 
<title> 功 能 < /title> 
< /head» 
«body» 
<center> 
<div><h3> 请 选择 :< /h3>< /div> 
<div><a href- "dataDisplay.htm" target- "F3"> 数 据 显示 < /a>< /div> 
<div><a href-".. /form 2.htm" target="F3"> BBR A < /a>< /div> 
«div» «a href- "table.htm" target- "F3"> 数 据 查 询 < /a>< /div> 
</center> 
€ /body» < /html> 

上 面 的 一 组 程序 (frame. htm, Title. htm, navigator. htm) 演 示 了 框架 如 何 分 割 浏 览 
器 窗口 及 各 窗口 中 执行 的 程序 。 

在 frame. htm 程序 中 ,二 frameset rows="40, * ”id 一 "FS1”frameborder 一 "1"” 
bordercolor="red" framespacing 一 "1" 之 将 浏览 器 分 割 成 两 行 窗口 : 第 一 行 窗口 高 40 像 
素 ,余下 的 高 度 全 给 第 二 行 窗口 ,两 行 窗口 之 间 有 边界 线 Cframeborder="1") ,边界 线 的 
Bil (& Jy £T. Cbordercolor— " red") ,窗口 之 间 的 距离 1 像素 (framespacing 王 "1"); 一 frame 
src— "Title. htm" name— "FI" scrolling="no" noresize^ XR: 第 一 行 窗口 中 要 运行 程 
FF Title. htm (sre =" Title. htm") ,该 窗口 的 名 字 是 Fl(Cname 王 "Fl1", 该 名 字 可 以 被 
<a>, form 4$ fj id AY target 属性 参考 ) ,该 窗口 没有 滚动 条 ,不 能 改变 大 小 
(scrolling="no" noresize) ;第 二 行 的 窗口 又 分 为 两 列 窗口 : 第 一 列 窗 口 的 宽 占 整个 窗口 
的 16%; 第 一 列 窗口 中 运行 程序 navigator. htm, 窗 口 的 名 字 是 F2 ,滚动 条 自动 显示 ;第 二 
列 窗口 初始 时 无 运行 的 程序 (src 一 "") ,名字 是 F3。 

Title. htm 显示 标题 “电子 商务 管理 平台 ”。 

navigator. htm 是 功能 选择 单 。 完 成 各 功能 的 程序 被 定位 到 第 二 列 窗口 F3 中 。 使 
用 “记事 本 ”输入 frame. htm, Title. htm navigator. htm 程序 并 存放 在 应 用 目录 中 。 在 浏 
览 器 中 运行 frame. htm, 并 选择 功能 后 ,浏览 器 会 显示 相应 窗口 的 内 容 。 


2.9 应 用 音乐 与 视频 标记 





使 用 过 embed 盖 标记 可 以 将 多 媒体 文件 添加 进 网 页 中 。 但 仅仅 这 样 做 还 不 够 ,还 需 
要 在 客户 端的 计算 机 中 安装 相应 的 播放 软件 ,这 样 浏览 器 才能 顺利 播放 。 
<embed> bj id ff] ERAH: 


<embed src= 多 媒体 文件 地 址 width= 播 放 界面 宽度 height= 播 放 界 面 高 度 > 
< /embed» 


在 该 语法 中 ,width 和 height 一 定 要 设置 ,单位 是 像素 ,否则 无 法 正确 显示 播放 多 媒 
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体 文件 的 软件 。 


1. 加 背景 音乐 二 embed 二 标记 
在 页 面 中 加 入 背景 音乐 的 代码 如 下 : 


<html> 

<head><title> 加 背景 音乐 < /title>< /head> 

<body> 

<embed src= "外 面 的 世界 .mp3" autostart- "true" loop- "true" width- "m" height="k"> 
</embed> 

















</body> 

</html> 

本 程序 中 要 素 说 明 如 下 : 

* sre 音乐 文件 的 路 径 及 文件 名 。 

* autostart true 为 音乐 文件 上 传 后 自动 开始 播放 ,默认 为 false( 否 )。 

* loop true 为 无 限 次 重播 ,false 为 不 重播 , 某 一 具体 值 (整数 ) 为 重播 多 少 次 。 

* Volume 取 值 范围 为 “0 一 100”, 设 置 音量 ,默认 为 系统 本 身 的 音量 。 

* Starttime “分 : 秒 ”, 设 置 歌曲 开始 播放 的 时 间 , 如 ,starttime=“00:10”, 从 第 
10 秒 开始 播放 。 


endtime* 分 : 秒 ” 一 一 设置 歌曲 结束 播放 的 时 间 。 
width 一 一 控制 面板 的 宽 。 

height 一 一 控制 面板 的 高 。 

也 可 以 在 页 面 中 添加 音乐 控制 器 ,使 用 二 object 二 标记 ,代码 如 下 : 
<html> 

<body> 

<object classid= "clsid:22D6F312- BOF6- 11D0- 94AB- 0080C74C7E95" id= "MediaPlayerl"> 


<param name= "Filename" value= "路 径 "> 


<param name- "AutoStart" value= "0"> 
</object> 

</body> 

</html> 


2. 在 页 面 中 添加 影片 
在 页 面 中 添加 影片 也 是 使 用 二 object 二 标记 ,代码 如 下 : 


<html> 

<head><title> 添 加 影片 < /title> </head> 

<body> 

<object classid="clsid:22D6F312- BOF6- 11D0- 94RB- 0080C74CTE95" id= "MediaPlayerl"> 
«param name= "Filename" value- "影片 名 .后缀 名 "> 

<param name- "AutoStart" value="1"> 

</object> 


第 2 章 ”HTML 静态 网 页 制作 基础 


< /param> 
< /body> 
« /html» 


说 明 . 


<param name- "AutoStart" value="a"> 

//a 表 示 是 否 自动 播放 电影 ,为 1 表示 自动 播放 ,0 是 按键 播放 ; 
<param name= "ClickToPlay" value="b"> 

/Ab 为 1 表示 用 鼠标 单 击 控制 播放 或 暂停 状态 ,为 0 是 禁用 此 功能 ; 
<param name= "DisplaySize" value="c"> 

//c 为 1 表示 按 原始 尺寸 播放 
<param name= "EnableFullScreen Controls" value= "d"> 

//d 为 1 表示 允许 切换 为 全 屏 ,为 0 则 禁止 切换 ; 
<param name- "ShowAudio Controls" value- "e" 

//e 为 1 表示 允许 调节 音量 ,为 0 禁止 调节 ; 
<param name= "EnableContext Menu" value= "f" 


/代为 1 表示 人 允许 使 用 右键 菜单 ,为 0 表示 禁用 右键 菜单 。 


3. 在 页 面 中 插入 Flash 
在 页 面 中 插入 Flash 可 以 使 用 二 object 二 十 二 embed 二 标记 ,简单 的 示例 代码 如 下 : 


<html> 
<body> 
<object classid= "clsid:D27CDB6E- AE6D- 11cf- 96B8- 444553540000" width= "802" 
height="502"> 
<param name= "movie" value="20160612162414361436.swf" /> 
<param name= "quality" value= "high" /> 
< embed src="20160612162414361436.swf" quality= "high" width= "802" 
height="502">< /embed> 
</object> 
</body> 
</html> 


2.10 滚动 标记 





在 HTML 中 要 设置 动态 文字 ,需要 使 用 二 marquee 二 标记 ,主要 语法 为 : 


<marquee direction= 滚 动 方向 behavior= 滚 动 方式 loop= 循 环 次 数 scrollamount= 滚 动 速度 
scrolldelay= 时 间 间 隔 bgcolor=- Y RAE width= 背 景 宽度 height= 背 景 高 度 hspace= 水 平 间隔 
vspace= 垂 直 间 隔 > 

滚动 的 文字 
< /marquee> 


主要 属性 如 下 : 
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direction 一 一 用 来 设置 文字 滚动 的 方向 ,可 以 为 left, right, up 或 down, 分 别 表 示 
文字 向 左右 、 上 \、 下 滚动 ,其 中 left 为 默认 值 。 

behavior 一 一 设置 文字 的 滚动 方式 ,可 以 为 scroll( 循 环 滚动 ,默认 效果 ) slide H 
滚动 一 次 ) 或 alternate( 来 回 交 蔡 滚动 )。 如 果 设置 为 slide, 则 滚动 一 次 后 ,文字 将 
会 停止 不 动 。 

loop 一 一 设置 文字 的 滚动 次 数 ,如 果 为 一 1( 默 认 值 ) , 则 无 限 次 滚动 。 但 此 属性 只 
ft IE 中 有 效 。 

scrollamount 用 来 设置 文字 的 滚动 速度 ,实际 上 是 滚动 文字 每 次 移动 的 长 度 ， 
以 像素 为 单位 ,默认 值 为 1。 这 个 值 最 好 不 要 太 大 ,否则 文字 跳动 比较 厉害 ,对 眼 
睛 有 损害 。 

scrolldelay 一 一 设置 文字 的 滚动 延迟 ,时 间 间 隔 单位 是 毫秒 ,也 就 是 千 分 之 一 秒 。 
这 个 单位 过 于 精细 了 ,一般 都 是 10 的 倍数 ,因为 过 小 的 值 显示 效果 很 晃 眼 。 
bgcolor 设置 滚动 文字 的 背景 颜色 。 

width 和 height 设置 滚动 背景 区 域 的 宽度 和 高 度 , 单 位 是 像素 。 在 默认 情况 
下 ,水 平 滚动 的 文字 背景 与 文字 同 高 .与 浏览 器 窗口 同 宽 。 

hspace 滚动 背景 和 周围 对 象 的 水 平 距离 ,单位 是 像素 。 

vspace 一 滚动 背景 和 周围 对 象 的 垂直 距离 ,单位 是 像素 。 














il 2-10 ”一 个 垂直 滚动 的 消息 提示 板 。 


<html> 


<head> 
<title> 垂 直 滚动 < /title> 
</head> 
<body> 
<table width- "120" border- "1" cellspacing- "0" cellpadding- "0" 
bgcolor- "4 339999" bordercolor- "# 339999" align="left"> 
<tr><td height- "17" align="center"> 
«font size- "4" color- "white"> 全 国 著名 大 学 </font> 
</td></tr> 
<tr bgcolor="# eeffee">< td height="80"> 
<marquee scrollamount="1" scrolldelay- "100" direction="up" 
width- "100$ " height- "80" hspace- "5"> 
<font size="2"><a href= "http://waw.tsinghua.edu.cn" target="_blank"> 
清华 大 学 < /a>< /font><br> 
<font size="2"><a href="http://www.pku.edu.cn" target="_blank"> 
北京 大 学 < /a>< /font> <br> 
<font size="2"><a href= "http://www.ruc.edu.cn" target="_blank"> 
中 国人 民 大 学 < /a>< /font><br> 
<font size="2"><a href- "http://www.ustc.edu.cn" target="_blank"> 
中 国 科技 大 学 </a>< /font><br> 
<font size="2"><a href-"http://www.sjtu.edu.cn" target="_blank"> 
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上 海 交通 大 学 </a>< /font» «br» 
<font size="2"><a href- "http://www.fudan.edu.cn" target="_blank"> 
复旦 大 学 </a></font> 

< /marquee» 

</td></tr> 

</table> 
</body> 
</html> 


显示 结果 如 图 2-12 所 示 。 
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全 国 著 名 大 学 








A212 文字 垂直 滚动 示意 图 


2.11 案例 实践 





2.11.1 案例 需求 说 明 


编写 图 2-13 所 示 的 页 面 ,要 求 能 够 通过 使 用 二 FRAMESET 二 创建 框架 页 面 ,并 通过 
指定 target 属性 在 框架 中 实现 页 面 的 跳 转 。 


2.11.2 技能 训练 要 点 


根据 本 章 对 于 HTML 页 面 设计 知识 的 讲解 可 知 .本 案例 的 训练 要 点 有 以 下 三 个 : 
(1) HTML 页 面 如 何 设 计 和 实现 。 

(2) 如 何 选择 创建 框架 的 类 型 。 

(3) target 的 属性 如 何 设 置 , 如 何 指向 跳 转 框架 的 名 称 。 


2.11.3 案例 实现 


根据 页 面 的 表现 形式 ,可 以 采取 工 字 形 的 经 典 框 架 格式 ,该 框架 由 三 个 页 面 组 成 ,分 
别 为 toplogo. html, left. html, right. html, 各 个 页 面 的 实现 可 以 综合 利用 前 面 讲 过 的 表 
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图 2-13 通过 创建 框架 集 实 现 的 网 页 


图 片 文字 排版 等 知识 实现 ,具体 操作 的 过 程 中 需要 单 击 left. html 中 的 超 链 接 来 让 内 
显示 在 right. html 中 ,所 以 还 要 注意 target 属性 的 设置 和 超 链接 的 跳 转 。 


具体 实现 代码 如 下 : 
(OD. 主页 面 (framset. html). 


< !DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/ 
frameset.dtd"» 
<HTML xmlns- "http: //www.wW3.0rg/1999/xhtml"» 
<HEAD> 
<META http- equiv= "Content- Type" content= "text/html; charset=gb2312"> 
<TITLE> 框 架 练习 < /TITLE> 
</HEAD> 
< FRAMESET rows= "80, * " cols="* " frameborder- "NO" border- "0" framespacing="0"> 
< FRAME src- "toplogo.html" name- "topFrame" scrolling- "NO" noresize> 
< FRAMESET cols- "30$, * " frameborder- "NO" border- "0" framespacing- "0"> 
<FRAME src-"left.html" name- "leftFrame" scrolling- "NO" noresize> 
<FRAME src- "right.html" name- "rightFrame"» 
< /FRAMESET» 
< /FRAMESET> 
< NOFRAMES» < BODY» 
</BODY> < /NOFRAMES> 
</HTML> 
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(2) 框架 上 方 页 面 (toplogo. html) 。 


<HIML> 
<HEAD> 
<META http- equiv= "Content- Type" content= "text/html; charset=gb2312"> 
«TITLE» TABLE 的 美化 修饰 < /TITLE> 
</HEAD> 
<BODY> 
< TABLE width= "957" border- "0" background= "images /naviBg.JPG"> 
<TR> 
<TD width= "529" rowspan- "2"> < IMG src= "images/logo.JPG" width= "290" height= 
"60"» </TD> 
<TD width= "67" height- "33"» < IMG src="images/buy.gif" width="58" height= 
"22"></TD> 
<TD width= "67"» < IMG src= "images/sell.gif" width- "58" height="22">< /TD> 
<TD width= "98"> < IMG src- "images/mypp.gif" width= "83" height="22">< /TD> 
<TD width= "61">< IMG src= "images/bbs.gif" width= "45" height="22">< /TD> 
<TD width="109"> 
< IMG src= "images/help.gif" width- "13" height- "13" align="absmiddle"> 
<FONT size-"- 1" color="# FF0000"» ## Hl HÙ « /FONT> 
</TD> 
</TR> 
<TR 
<TD height- "28" colspan="2">< FONT size="- 1" color="# FF6262"> 欢 迎 来 到 拍 拍 网 !</ 
FONT>< /TD> 
<TD colspan- "3"» 
«FONT size-"-1"»«A href="#"> [登录 ]</A> | <A href="#"> [免费 注册 ]</a> | <A 
href="#"> [结算 中 心 ]< /A>< /FONT> 
</TD> 
</TR> 
</TABLE> 
</BODY> 
</HTML> 


(3) 框架 左 侧 页 面 (left. html) 。 


<HIML> 
«HEAD» 
<META http- equiv- "Content- Type" content- "text/html; charset=gb2312" /> 
<TITLE> 左 侧 导航 页 面 < /TITLE> 
</HEAD> 
<BODY> 
< TABLE height- "400"  border- "0" background=" images /background. jpg" align= 
"right"» 
«TR 
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<TD width= "166" height="140">< /TD> 
</TR> 
<TR> 





<TD align="right"><A href- "rightl.html" target="rightFrame"> 
<IMG src= "images/help_1.JPG" width- "146" height- "35" border="0">< /A> 
</TD> 
</TR> 
<TR 
<TD align="right"><A href="right2.html" target="rightFrame"> 
< IMG src= "images/help 2.JPG" width- "146" height- "35" border="0">< /A» 
</TD> 
</TR> 
<TR 
<TD align="right"> <A href= "# ">< IMG src= "images/help 3.JPG" width="146" height= 
"35" border="0">< /A> 
</TD></TR> 
<TR> 
<TD align="right"> <A href="# ">< IMG src= "images/help 4.JPG" width= "146" height= 
"35" border="0">< /A> 
</TD> 
</TR> 
<TR> 
<TD height="140">< /TD>< /TR> 
</TABLE> 
</BODY> 
</BTML> 


(4) 框架 右 侧 页 面 (right. htm 。 


<HIML> 
<HEAD> 
<META http- equiv- "Content- Type" content= "text/html; charset=gb2312"> 
« TITLE» fi 48 & 2] < /TITLE> 
</HEAD> 
<BODY> 
<TABLE width= "568"> 
<TR 
< TD width="568" height="25" background="images/main_bg_01.jpg"> &nbsp; 
&nbsp; gnbsp; snbsp; 新 手 上 路 < /TD> 
</TR> 
<TR 
<TD> 
<IMG src-"images/help 5.jpg" width- "566" height="158"> 
</TD> 
</TR> 
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<TR> 
<TD width="568" height="25" background-"images/main bg O01.jpg"» &nbsp; 
&nbsp: énbsp; gnbsp; 热 门 帮助 
</TD> 
</TR> 
<TR> 
<TD> 
«UL» 
<LI><A href="#"> 如 何 即时 与 卖家 沟通 ?< /A> < /LI> 
<LI><A href= "# "> 如何 查 找 想 要 的 商品 ?< /A> < /LI> 
<LI><A href="#"> 如 何 出 价 购买 商品 ? < /A></LI> 
<LI><A href= "# "> 如何 使 用 财 付 通 付款 ? < /A>< /LI> 
<LI><A href="#"> 如 何 给 卖家 评价 ? < /A></LI> 
</UL> 
</TD> 
</TR> 
</TABLE> 
</BODY> 


« /HIML» 


本 章 小 结 


本 章 对 HTML 语法 做 了 简要 概述 。 通 过 本 章 的 学 习 , 可 以 了 解 HTML 的 基本 结 
构 ,熟悉 常用 HTML 排版 标记 、 清 单 标记 及 文本 格式 ,学 会 使 用 HTML 图 片 及 超 链接 ， 
重点 掌握 表单 的 使 用 方法 ,学 会 使 用 frame 框架 分 割 浏览 器 窗口 ,并 学 会 应 用 音乐 ,视频 
AR A brid. 





A RD 题 


一 、 选 择 题 
1. 下 面 描述 错误 的 是 ( P 
A. HTML 文件 必须 由 二 html> 开 头 , 一 /html> 标 记 结束 
B. XARA B. & 5 fE- head 5 </head> Z i] 
C. fE- head fll — /head- Z [8] nT UER <title> fll — body 4$ fri E 
D. SPA S HE <body> fll-—/body- biid Z i] 
2. 下 列 设 置 颜色 的 方法 中 不 正确 的 是 ( Me 
A. <body bgcolor="red"> 
B. <body bgcolor="yellow" > 
C. <body bgcolor=" € FF0000"— 
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D. <body bgcolor=" € HHOOFF"> 
3. 设置 文档 体 背 景 颜色 的 属性 是 ( Js 


A. text B. bgcolor €. 


background D. link 


4. <title> </title> fi id E <head> + </head> fy id Zi], <title> </title> fi 


浏览 器 的 标题 栏 上 
浏览 器 的 页 面 下 部 


<hr> D. <hn> 


6. <p align 二 "段落 对 齐 方 式 "二 标记 中 ,align 属性 为 段落 文字 的 对 齐 方式 ,不 能 取 


间 的 内 容 将 显示 到 ( D). 

A. 浏览 器 的 页 面 上 部 B. 

C. 浏览 器 的 状态 栏 中 D. 
5. ( ) 是 标题 标记 。 

A. <p> B. <br> Č: 
为 ( Jus 

A. Left B. Right C. 
7. <font> </font> jid P RUA P XFC 

A. 宋体 B. 4i c. 
8. 表示 黑体 加 斜体 的 标记 是 ( ys 

A. <B> ¥{k</B> B. 

C. <B><I>¥(K</I></B> D. 
9. 文本 下 标 标 记 为 ( m 

A. <sub></sub> B. 

C. <sup></sup> D. 
10. ft HTML 中 超 链 接 标记 为 ( Me 

A, aba B. 

C. <html> Al</html> D. 


11. 下 面 ( ) 是 正确 的 超 链接 标记 。 


Center D. width 
do 
楷体 D. 仿宋 体 


<I> Ftk</I> 
<<U> 字 体 </U>> 


<sud> </sud> 
<suq> </suq> 


<title> Al</title> 
<body> fil</body> 


A. <a href="http: //www. sina. com" " title 一 "新 浪 网 "二 新 浪 网 一 /a> 


B. <a target="http; //www. sina. com" " 


title 二 "新 浪 网 "二 新 浪 网 二 /a 二 


C. <a href 二 "新 浪 网 ”title 二 "新 浪 网 "这 http: //www. sina. com </a> 

D. <a target 二 "新 浪 网 "” title 二 "新 浪 网 "之 http: //www. sina. com</a> 
12. 表格 在 网 页 中 应 用 非常 广泛 ,常用 于 网 页 的 布局 排版 ,下 面 ( ) 不 是 表格 的 
标记 。 


A. <tables> B. <tr> €. 


13. € ) 标 记 用 来 对 页 面 内 容 进行 预定 义 。 


A. <p> B. <br> €; 


<td> D. <th> 


<hr> D. <pre> 


14. 表单 中 的 数据 要 提交 到 的 处 理 文件 由 表单 的 ( ) 属 性 指定 。 


A. method B. name C. 


action D. 以 上 都 不 对 


15. 4¥<input> tid type 属性 值 为 ( ) 时 ,代表 一 个 复 选 框 。 


A. text B. radio C. 


checkbox D. button 
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二 、 填空 题 

1. HTML 文档 的 扩展 名 是 或 ,它们 是 可 供 浏 览 器 解释 浏览 的 网 
页 文件 格式 。 

2. Web 服务 器 通过 获取 用 户 信息 。 

3. HTML 文档 分 为 文档 头 和 两 部 分 。 

4. HTML 文件 是 文件 格式 ,可 以 用 文本 编辑 器 进行 编辑 制作 。 

5. 常用 的 列表 分 别 有 和 E 

6. 表单 一 般 由 、 和 组 成 。 

$; 是 一 种 能 够 有 效 描述 信息 的 组 织 形式 ,由 行 、 列 和 单元 格 组 成 。 

8. 表格 定义 中 使 用 的 子 标记 二 td 二 的 含义 为 

9. 将 一 个 图 像 作为 一 个 超级 链接 ,用 到 了 标记 。 

10. input 表单 域 表示 一 个 文本 框 时 , 它 的 type 属性 应 该 赋值 为 ° 

11. URL 是 Uniform Resource Locator 的 缩写 ,中 文 称 之 为 

12. 超级 链接 标记 二 a 二 的 href 属性 取 值 为 E 

三 、 简 答题 

1. 什么 是 HTML? 它 有 什么 基本 标记 ? 

2. 如 何在 网 页 中 设置 字体 ? 有 哪些 字体 可 以 使 用 ? 

3. 如何 引入 一 张 图 片 ? 如 何 给 图 片 加 上 边框 ? 

4. 如 何 使 用 超级 链接 ? 如 何 将 超级 链接 的 下 划 线 去 掉 ? 

5. 如 何 定义 跨行 的 表格 ?如 何 将 表格 的 字体 和 边框 的 距离 加 大 ? 

6. 框架 有 几 种 基本 形式 ?如何 使 用 ? 

四 、 程 序 题 

1. 已 知 页 面 中 的 框架 如 图 2-14 所 示 ,请 将 以 下 代码 补充 完整 。 










第 一 章 绪论 
本 章 要 简 述 的 课程 的 要 点 是 







联系 人 地 址 : test@163. com 











图 2-14 框架 应 用 
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uqes 
第 二 章 程序 开发 环境 


本 章 要 简 述 的 课程 的 要 点 是 : 

















联系 人 地 址 : test@163. com 











图 2-14( 续 ) 


-- 以 下 是 main.htm (X X ff) 








<html><head><title> 超 链接 的 帧 例子 < /title> < /head> 


<frameset ="300, * " bordercolor- "blue"> 
< frameset ="208, * "> 
< frame "framel.html" scrolling="no" name="winl"> 





< frame -"frame2.html" name= "win2"> 
< /frameset» 
< frame ="frame3.html" noresize marginwidth- 5 name= "win3"> 
</frameset> 
<noframes> 


< /noframes> 
</html> 





<html> 

<head> 

<title> 左 框架 < /title> 

</head> 

<body> 

<a href= "第 一 章 .html" win2"> 第 一 章 </a><br /><br /> 
<a href- "第 二 章 .html" = "win2"> 第 二 章 </a> 











«html» 
«head» 

«title» 5$ — Ë< /title» 
< /head» 

<body> 
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<hl> 第 一 章 绪论 < /hl><br /> 本 章 要 简 述 的 课程 的 要 点 是 :<br /><br /> 
<a href=" "> 返回 </a> 





<html> 

<head> 

<title> 第 三 个 框架 < /title> 
</head> 

<body> 

<h2> 联 系 人 地 址 :test@ 163.com< /h2> 





<html> 

<head> 

<title> 第 一 章 < /title> 

</head> 

<body> 

<hl> 第 一 章 ”绪论 < /hl><br /> 本 章 要 简 述 的 课程 的 要 点 是 :<br /><br /> 
<a href- "第 一 章 .html"> 返 回 < /a> 





<html> 
<head> 
<title> 第 二 章 < /title> 
</head> 
<body> 
<hl> 第 二 章 “程序 开发 环境 < /hl><br /> 本 章 要 简 述 的 课程 的 要 点 是 :<br /><br /> 
<a href- "第 一 章 .html"> 返 回 < /a> 
< /body> 
</html> 
2. 编写 图 2-15 所 示 的 E-mail 注册 的 表单 。 | 姓名 ， 
在 常用 的 表单 制作 过 程 中 ,经 常 遇 到 的 是 按 ER eg ck 
5 = aE g tp mH. Co CA CBC 
钮 制作 、 输 入 元 素 的 制作 等 。 常 见 的 表单 控件 包 th EMIT ID 误杀 体贴 CRER 
括 文本 框 . 文 本 域 .密码 框 、 多 选 框 , 单 选 框 和 下 | 文件 ， LR... | 
拉 列 表 框 ,等 等 。 除 了 文本 域 和 下 拉 列 表 , 其 他 
只 要 修改 TYPE 属性 就 可 以 了 。 
3. 制作 如 下 两 个 页 面 : 
link. html 一 一 些 页 面 只 有 一 个 超级 链接 。 | 简介 : H 
dep. Form 
用 户 单 击 此 链接 后 将 链接 到 login. html 登录 
页 面 。 图 2-15 表单 中 常用 控件 
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login. html 一 一 此 页 面 为 用 户 登 录 页 面 , 用 户 可 以 在 此 页 面 输入 用 户 名 和 密码 ,然后 
提交 表单 。 运 行 效果 如 图 2-16 所 示 。 


ELI E S oft Internet Explorer = O X 
XPO RAO SEV bea IAD " AF 


o=- 0O- MBG Pm " 








图 2-16 练习 题 页 面 运行 效果 


4. 编写 图 2-17 所 示 效 果 对 应 的 html 代码 。 


HTML 语 言 是 网 页 制作 的 基础 ， 是 初学 
者 必 学 的 内 容 。 





图 2-17 框架 页 面 


#38 Dreamweaver 


基本 网 页 编辑 


3.1 Dreamweaver 简介 





工 欲 善 其 事 , 必 先 利 其 器 。Dreamweaver 是 由 Micromedia 公司 出 品 的 一 款 流行 的 专 
业 从 事 网 页 设计 、 网 站 管理 、 网 页 可 视 化 编程 的 应 用 软件 ,具有 跨 平台 、 跨 浏览 器 的 特点 。 
它 与 Flash、Fireworks 合 在 一 起 被 称 为 网 页 制作 三 剑客 ,这 三 款 软 件 相 辅 相 成 ,是 网 页 制 
作 的 最 佳 选择 。Dreamweaver 制作 网 页 的 效率 很 高 ,制作 出 来 的 网 页 兼容 性 也 比较 好 ， 
Flash 主要 用 来 制作 精美 的 网 页 动画 ,而 Fireworks 用 来 处 理 网 页 中 的 图 形 。 


3.2 软件 界面 介绍 





在 安装 Dreamweaver 之 后 , 它 会 自动 在 Windows 的 “开始 ?菜单 中 创建 程序 组 ,打开 
“开始 ”菜单 ,选择 “程序 ”> Macromedia Dreamweaver > Dreamweaver 命令 , 便 可 启动 
Dreamweaver ,软件 启动 后 会 新 建 一 个 空白 的 HTML 文档 等 候 编辑 ,如 图 3-1 所 示 , 界 面 
上 面 是 标题 栏 ,显示 出 被 编辑 页 面 的 标题 ,在 括号 内 显示 出 文档 所 在 目录 及 文件 名 ,如 果 
有 星 号 出 现 , 则 表示 页 面 中 存在 没 保存 的 改动 。 标 题 栏 下 面 是 菜单 ,里 面 列 有 软件 的 功能 
列表 ,这 与 其 他 软件 一 样 。 中 间 这 一 大 块 空白 地 方 是 文档 窗口 .就 在 这 里 制作 网 页 。 


3.2.1 文档 窗口 


文档 窗口 有 三 种 视图 状态 ,分 别 是 代码 、 拆 分 和 设计 。 在 文档 工具 栏 部 分 有 三 个 按 
钮 ,如 图 3-2 所 示 ,可 以 快速 地 切换 三 种 视图 。 

在 代码 视图 状态 下 ,文档 窗口 显示 网 页 的 代码 。 

在 设计 视图 状态 下 .文档 窗口 显示 网 页 的 外 观 , 即 通 常 所 说 的 “所 见 即 所 得 ”的 编辑 
方式 。 

在 拆 分 视图 状态 下 ,文档 窗口 被 拆 分 成 上 下 两 个 窗口 .两 个 窗口 分 别 是 代码 视图 状态 
和 设计 视图 状态 ,而且 在 这 种 状态 下 ,两 个 窗口 是 关联 的 ,无 论 是 在 代码 窗口 选 定 代码 或 
是 在 设计 窗口 选 定 元 素 , 另 一 个 窗口 都 会 定位 到 相应 的 位 置 。 
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图 3-1 Dreamweaver 界面 介绍 


显示 代码 视图 
显示 代码 视图 和 设计 视图 
显示 设计 视图 文档 标题 





在 浏览 器 中 预览 /调试 


32 ”视图 切换 按钮 


3.2.2 状态 栏 
状态 栏 提示 当前 创建 的 文档 的 有 关 信 息 , 如 图 3-3 所 示 。 





3-3 RAE 


首先 左 侧 显示 当前 编辑 的 内 容 所 属 的 节点 。 右 侧 提供 的 选取 工具 、. 手 型 工具 、 缩 放 工 
具 是 在 设计 视图 下 的 快捷 按钮 ,作用 分 别 是 选取 页 面 元 素 , 移 动 页 面 以 方便 浏览 ,放大 或 
缩小 页 面 的 显示 比例 。 

以 图 3-3 所 示 状 态 栏 为 例 ,“100%” 表 示 当 前 的 显示 比例 ,524X159 表示 当前 文档 窗 
口中 页 面 显示 部 分 的 宽度 和 高 度 ,“1K/1 秒 ” 表 示 当 前 页 面 文件 的 大 小 ,以 及 浏览 时 页 面 
下 载 所 需 的 时 间 ( 参 照 的 下 载 速 度 可 以 自行 设 定 )。 
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3.2.3 MATHE 


插入 工具 栏 提供 的 是 部 分 操作 或 功能 的 快捷 按钮 .这些 功 能 或 操作 是 在 编辑 网 页 中 
频繁 使 用 的 ,非常 方便 。 插 和 人 工具 栏 主要 展示 了 常用 、\ 布 局 .表单 和 文本 等 几 个 部 分 ,这 几 
个 部 分 的 功能 对 于 编写 静态 页 面 是 最 为 常用 的 。 

常用 部 分 包含 了 在 页 面 中 插入 超 链 接 、 图 像 表 格 、 锚 标记 ,注释 、 脚 本 、 日 期 等 操作 的 
快捷 按钮 ,如 图 3-4 所 示 。 





3-4 插入 工具 栏 (常用 ) 


布局 部 分 提供 了 搬入 二 div 之 元素、 框架 以 及 借助 Spry 框架 实现 的 菜单 .选项 卡 面板 
等 操作 的 快捷 按钮 ,如 图 3-5 所 示 。 





图 3-5 插入 工具 栏 (布局 ) 


表单 部 分 提供 了 插入 表单 标记 及 各 个 控件 的 快捷 按钮 。 此 外 提供 了 借助 Spry 框架 
实现 的 部 分 控件 输入 值 验证 的 功能 按钮 ,如 图 3-6 所 示 。 


\, 





Dos C3 [Ra 1e) (3| £9 (2| (8) O | 3 C3 a 3 2 E 


图 3-6 插入 工具 栏 (表单 ) 


文本 部 分 提供 了 插入 特殊 符号 文本 的 快捷 按钮 。 如 果 不 使 用 这 些 按钮 就 要 在 代码 中 
输入 相应 的 字符 实体 实现 ,如 图 3-7 所 示 。 





图 3-7 插入 工具 栏 (文本 ) 


3.2.4 文档 工具 栏 


文档 工具 栏 上 有 前 面 提 到 的 文档 视图 切换 按钮 ,同时 还 有 新 建 . 打 开 、 保 存 . 剪 切 、 复 
制 、 粘 贴 ` 页 面 预览 上 传 ,根据 DTD 声明 验证 HTML 标记 等 快捷 按钮 ,如 图 3-8 所 示 。 

此 外 ,文档 工具 栏 还 可 以 对 不 同 媒体 终端 进行 支持 ,比如 说 计算 机 、 投 影 仪 .手持 设备 
等 。 文 档 工具 栏 提供 了 不 同 媒体 终端 的 切换 按钮 ,以 便 根据 样式 表 显 示 相 应 媒体 下 的 效果 。 





图 3-8 文档 工具 栏 
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3.2.5 属性 面板 


属性 面板 用 于 对 网 页 中 元 素 属性 的 设置 ,属性 面板 中 的 属性 项 动态 关联 至 鼠标 选 定 
的 网 页 元 素 。 图 3-9 和 图 3-10 分 别 展 示 的 是 网 页 中 文本 的 属性 页 和 图 像 元 素 的 属性 页 。 


az fe css | wiz) eels 
| fa =] AES llaa 


| 到 | 

ADSI Ol ^| 
[| Ezz 
[tun 到 | 





图 3-10 属性 面板 (图 像 属性 ) 


3.2.6 结果 面板 


结果 面板 用 于 显示 几 种 常用 操作 的 操作 结果 ,如 图 3-11 所 示 。 
a 





图 3-11 结果 面板 


以 下 详细 介绍 结果 面板 中 较为 常用 的 几 种 功能 : 

CD 搜索 。Dreamweaver 提供 的 搜索 功能 十 分 强大 。 如 图 3-12 所 示 ,Dreamweaver 
搜索 的 范围 可 以 是 鼠标 选 定 的 一 段 文 字 、 当 前 文档 、 当 前 打开 的 几 个 文档 、 某 个 文件 夹 下 
的 所 有 文档 其 至 是 整个 站 点 的 文档 。 而 且 查 找 的 内 容 可 以 是 源 代码 ,可 以 是 文本 ,也 可 以 
是 某 个 标记 。 

(2) 参考 。 参 考 部 分 准备 了 十 余 本 参考 书 , 大 部 分 是 O'Reilly 公司 出 版 的 有 关 Web 
技术 方面 的 手册 ,涉及 HTML, JavaScript, ASP,PHP,JSP 等 。 对 于 英文 基础 比较 好 的 
学 习 者 有 很 大 的 帮助 。 

G) 验证 。HTML 规范 有 着 不 同 版 本 ,编写 网 页 时 规范 的 做 法 是 在 第 一 行 便 声明 页 
面 代码 遵循 哪 一 个 HTML 规范 。 验 证 部 分 就 是 根据 声明 或 在 没有 声明 的 情况 下 根据 默 
认 设 置 验证 页 面 是 否 符合 规范 。 如 果 不 符合 规范 则 会 在 结果 面板 区 域 列 示 网 页 中 不 符合 
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SEAGER 





图 3-12 查找 和 替换 功能 


规范 的 标记 或 属性 。 这 对 于 编写 符合 W3C 标准 的 网 页 十 分 有 帮助 。 
CD 浏览 器 兼容 性 检查 。 与 验证 功能 相似 ,应 预先 设 定 所 要 编写 的 网 页 适合 哪些 浏 
览 器 类 型 及 版 本 ,通过 此 功能 检查 网 页 中 使 用 的 标记 在 这 些 浏览 器 中 是 否 能 够 正常 显示 。 
(5) 链接 检查 器 。 检 查 选 定 的 文档 中 的 链接 是 否 有 效 , 无 效 链接 将 显示 在 结果 面板 
区 域 。 


3.2.7 文件 面板 


文件 面板 ( 见 图 3-13) 可 以 管理 当前 站 点 的 文件 和 文件 夹 ,无 论 它 们 是 本 地 站 点 还 
是 在 远程 服务 器 上 。 文 件 面板 还 可 以 访问 本 地 磁盘 上 的 全 部 文件 ,类 似 于 Windows Vt 
源 管理 器 。 文 件 面板 提供 了 多 种 视图 : 本 地 视图 、 远 程 视图 、 测 试 服务 器 、 地 图 视图 。 


3.2.8 面板 组 


面板 组 是 分 组 在 某 个 标题 下 面 的 相关 面板 的 集合 ,如 图 3-14 所 示 。 若 要 展开 一 个 面 
板 组 ,可 以 单 击 组 名 称 左 侧 的 展开 箭头 ; 若 要 取消 停靠 一 个 面板 组 ,可 以 拖 动 该 组 标题 条 
左边 缘 的 手柄 。 








图 3-13 文件 面板 图 3-14 面板 组 
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该 面板 组 中 的 面板 均 未 展开 ,在 这 里 对 其 做 一 个 简单 说 明 。 

(D CSS. 显示 当前 元 素 的 CSS 样式 ,可 以 在 该 区 域 新 建 、 修 改 或 删除 CSS 声明 
语句 。 
(2) 代码 片断 : 代码 片断 部 分 收集 了 许多 常用 代码 段 , 包 括 HTML Ri JavaScript 
代码 等 。 

(3) 应 用 程序 : 应 用 程序 面板 为 使 用 动态 技术 页 面 的 编写 提供 了 方便 ,该 部 分 包括 
了 数据 库 的 链接 .数据 集 的 绑 定 .组 件 的 使 用 等 方面 的 内 容 。 

(4) 标记 检查 器 : 标记 检查 器 动态 关联 到 文档 窗口 内 当前 选 定 的 元 素 标记 ,标记 检 
查 器 列 示 出 该 标记 具有 的 属性 ,可 供 该 标记 绑 定 的 事件 等 。 

(5) 资源 : 资源 面板 用 于 管理 页 面 中 使 用 的 多 媒体 元 素 ,图 片 、Flash 动画 .声音 文 
件 等 。 

实际 上 ,Dreamweaver 在 默认 状态 下 还 有 很 多 面板 未 显示 ,可 以 通过 设置 选择 显示 
的 面板 ,调整 面板 的 布局 ,因此 使 用 者 可 以 根据 自己 的 使 用 习惯 定制 该 应 用 程序 的 显示 
项 目 。 


3.2.9 菜单 


由 于 很 多 的 常用 功能 在 Dreamweaver 界面 上 都 有 快捷 按钮 ,而 菜单 中 更 加 复杂 的 功 
能 也 不 是 本 书 的 介绍 内 容 , 因 此 本 节 只 介绍 “编辑 菜单 中 的 几 项 。 

CD 标记 库 : 标记 库 显 示 如 图 3-15 所 示 。 可 以 新 建 标记 ,并 且 可 以 为 标记 添加 属性 。 
符合 W3C 规范 的 HTML 标记 都 已 经 被 预 置 在 其 中 。 














文本 <a> 标记 
内 容 </a> 文 本 


335 标记 库 编辑 器 


(2) 快捷 键 : 可 以 修改 或 添加 常用 操作 的 快捷 键 ,以 提高 使 用 Dreamweaver 的 效率 ， 
其 设置 界面 如 图 3-16 所 示 。 
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图 3-16 ”快捷 键 设 定 面板 


(3) 首选 参数 : 这 里 主要 介绍 “首选 参数 "中 三 个 方面 的 内 容 。 
CD 新 建文 档 ( 见 图 3-17),“ 新 建文 档 ” 选 项 组 的 “默认 文档 ”决定 着 在 每 次 新 建 一 个 
HTML 页 面 时 ,系统 为 页 面 加 上 何 种 DOCTYPE 声明 。 


CA] 


[HTML 4.01 Transitional 到 
] 
zd 

5 ] 


|o (规范 分 解 ,后跟 规范 合成 ) 





图 3-17 首选 参数 设置 面板 (新 建文 档 ) 


© 验证 程序 ( 见 图 3-18), 它 的 作用 是 为 没有 明确 声明 DOCTYPE 的 页 面 指定 规范 
标准 。 
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以 上 对 Dreamweaver 界面 的 组 成 部 分 及 功能 进行 了 大 致 的 介绍 。 有 了 这 些 背 景 知 
识 , 相 信 读 者 对 于 Dreamweaver 的 基本 功能 已 经 了 解 。 


O ColdFusion 3.1 








图 3-18 首选 参数 设置 面板 (验证 程序 ) 


3.3 Dreamweaver 的 基本 操作 





文本 、 图 像 和 多 媒体 对 象 等 是 组 成 网 页 的 最 基本 元 素 , 制 作 精 美 .设计 合理 的 网 页 元 
素 不 仅 可 以 增强 网 页 的 丰富 性 和 观赏 性 ,还 能 够 提高 人 们 浏览 网 页 的 兴趣 。 因 此 ,正确 恰 
当地 插 和 文本、 图像 和 多 媒体 对 象 是 每 个 网 页 制作 者 必 备 的 基本 技能 。 


3.3.1 在 网 页 中 操作 文本 


文字 是 构成 网 页 的 重要 部 分 ,要 向 Dreamweaver 文档 添加 文本 ,可 以 直接 在 文档 窗 
口中 输入 文本 ,也 可 以 复制 文本 。 首 先 启动 Dreamweaver, 确 保 已 经 用 站 点 管理 器 建立 好 
了 一 个 网 站 ( 根 目录 )。 为 了 制作 方便 ,最 好 事先 打开 资源 管理 器 ,把 要 使 用 的 图 片 收集 到 
网 站 目录 的 images 文件 夹 内 。 

1. 添加 文本 

1) 直接 添加 文本 

既 可 在 设计 视图 中 输入 ,也 可 在 代码 视图 中 输入 。 打 开 一 个 网 页 文件 ,进入 
Dreamweaver 设计 视图 , 像 在 其 他 的 文字 编辑 程序 中 一 样 直接 输入 文字 ,如 图 3-19 所 示 。 
也 可 以 切换 到 代码 视图 直接 输入 文字 ,如 图 3-20 所 示 。 

输入 过 程 中 的 换行 方法 : 

。 自动 换行 。 在 输入 文本 的 过 程 中 ,Dreamweaver 会 根据 当前 页 面 设置 的 边 距 自动 
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欢迎 使 用 html 代 码 ! 





3-19 设计 视图 下 的 页 面 效果 


Z <html xmlns="http: //www. w3. org/1999/xhtal"> 

8 <head> 

4 <meta http-equiv="Content-Type” content="text/html; charseteutf-8" /> 
四 <title> 无 标题 文档 </title> 

B </head> 

m 

8 


<body> 

9 欢迎 使 用 hcal 代 码 ?| 
10 </body> 
/ha 


图 3-20 ”代码 视图 


换行 ,使 得 文本 一 直 保持 在 页 边 距 内 。 自 动 换行 的 好 处 在 于 不 管 浏览 器 窗口 有 多 
大 ,网 页 文字 都 将 依照 窗口 大 小 自动 换行 ,避免 超出 水 平 页 面 之 外 而 需要 移动 滚 
动 条 浏览 的 情况 。 

利用 Enter 键 换行 ( 硬 换行 )。 按 Enter 键 , 则 另 起 一 个 段落 ,并 且 插 入 点 移 到 隔 了 
一 个 空白 行 的 位 置 上 。 在 代码 视图 中 显示 为 <p 志 标记。 

利用 Shift 十 Enter 键 换行 ( 软 换行 )。 如 果 要 将 文字 手动 换行 ,中 间 又 不 出 现 空白 
行 ,可 以 按 Shift-- Enter 键 ,其 行距 比 直接 按 Enter 键 小 。 在 代码 视图 中 显示 为 
去 br> 标 记 。 其 在 设计 视图 和 代码 视图 下 的 显示 效果 分 别 如 图 3-21 和 图 3-22 
所 示 。 





UA ， 未 来 旅游 








图 3-21 设计 视图 下 的 页 面 效果 


amg siu- imagos imgur jpe viuum scu neige cuu (74 


Lu 
我 们 对 未 来 充 清美 好 的 祝愿 ， 和 RES 
x 空气 洁净 清新 ， 大 家 共 4 
认为 ， 这 可 能 是 一 WERE. i A 
H peers 让 我 们 一 起 畅想 未 来 吧 。 


3-22 OLEI IBI p br fri 


在 Dreamweaver 中 ,在 文本 开始 处 直接 按 空格 键 是 不 会 输入 空格 的 ,在 文字 之 间 按 
空格 键 可 以 输入 半 个 空格 。 如 果 要 在 网 页 中 输入 空格 ,可 以 采用 以 下 两 种 方法 : 


55. 


56 Web 项 目 开发 实践 教程 


第 一 种 , 按 住 Ctrl 十 Shift 键 , 按 一 次 空格 键 ,输入 半 个 空格 。 

第 二 种 ,将 输入 法 由 半角 状态 切换 到 在 全 角 状 态 , 按 一 次 空格 键 ,输入 一 个 空格 。 

2) 复制 文本 

打开 字 处 理 软件 中 含有 文本 的 文档 ,如 Word 文档 ,执行 “编辑 "菜单 中 的 “复制 " 命 
令 。 然 后 在 Dreamweaver 文档 窗口 中 ,将 插入 点 置 于 要 添加 文本 的 位 置 ,执行 “编辑 ” 菜 
单 中 的 “粘贴 ”命令 ,完成 文本 复制 。 

3) 导入 Word 文档 

如 果 用 户 已 经 在 Word 文档 中 将 所 需 的 信息 收集 完毕 , 可 直接 将 其 导入 
Dreamweaver 中 。 导 入 方法: 选择 “文件 ”导入 ”Word 文档 ”命令 ,在 “打开 ”对 话 框 
中 选择 需要 导入 的 Word 文档 , 单 击 “ 确 定 ” 按 钮 , 即 可 完成 Word 文档 的 导入 。 

Dreamweaver" FA” JJ i£ Bi T REI FA Word 文档 外 ,还 可 以 实现 导入 Excel 文档 、 
表格 式 数据 及 XML 到 模板 等 功能 。 

2. 格式 化 文本 

在 Dreamweaver 中 ,可 以 使 用 文本 的 属性 面板 方便 地 进行 文本 的 格式 设置 。 
Dreamweaver 默认 的 属性 面板 即 是 文本 的 属性 面板 ,如 图 3-23 所 示 。 











om | sos H & saaren 00 
bs | amm 攻 EF) Ww smol 1] 


图 3-23 文本 的 属性 面板 (HTML 格式 ) 


注意 : 如 果 没 有 显示 属性 面板 ,可 以 通过 执行 “窗口 "菜单 下 的 “属性 ”命令 来 显示 它 。 

1) 在 属性 检查 器 中 设置 HTML 格式 

选择 要 设置 格式 的 文本 ,打开 属性 检查 器 , 单 击 HTML 按钮 ,设置 要 应 用 于 所 选 文 
本 的 格式 选项 。 

“格式 ?下 拉 列 表 框 列 出 了 用 于 设置 所 选 文本 的 段落 样式 。 在 代码 视图 中 “段落 "用 
去 p 二 标记 表示 ,标题 1” HIE h1 > </h1 > id RA Ubi 2" HE - h2 > </h2> b id de 
示 , 依 此 类 推 ,如 图 3-24 所 示 。 手 动 删 除 这 些 标记 ,文字 的 样式 就 会 消失 。 








无 Bi Ezaa) —  _ 
923 目标 (@) 














图 3-24 各 级 标题 
ID 下 拉 列 表 框 用 于 为 所 选 内 容 分 配 ID, 以 表示 其 唯一 性 。ID 下 拉 列 表 框 中 默认 情 


况 下 为 “无 ”选项 。 
“类 ”下 拉 列 表 框 用 于 显示 当前 应 用 于 所 选 文 本 的 类 样式 。 如 果 没 有 对 所 选 内 容 应 用 
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过 任何 样式 , 则 “类 ”下 拉 列 表 框 中 显示 “无 选项。 如果 对 所 选 内 容 应 用 了 样式 , 则 该 下 拉 
列表 框 中 会 显示 出 应 用 于 该 文本 的 样式 。 使 用 该 下 拉 列 表 框 可 以 直接 为 文本 选择 样式 列 
表 中 已 经 存在 的 样式 ,也 可 选择 “无 ”选项 以 删除 当前 所 选 的 样式 ,还 可 选择 “ 重 命 名 ”选项 
以 重 命名 该 样式 或 者 选择 “附加 样式 表 ” 选 项 以 打开 一 个 允许 向 页 面 附加 外 部 样式 表 的 对 
话 框 ,样式 表 的 内 容 将 在 后 面 章节 中 介绍 。 

加 粗 和 倾斜 按钮 下 了 可 以 使 选中 的 文本 加 粗 和 倾斜 。 

“项 目 列表 ”按钮 用 于 为 所 选 文本 创建 项 目 列表 ,又 称 为 无 序列 表 。 

“编号 列表 ”按钮 用 于 为 所 选 文本 创建 编号 列表 ,又 称 为 有 序列 表 。 

“删除 内 缩 区 块 " 和 “内 缩 区 块 ”" 量 28 按钮 用 于 为 所 选 文本 减少 缩 进 或 增加 缩 进 。 

“链接 ”下拉 列表 框 用 于 创建 所 选 文本 的 超级 链接 。 创 建 超级 链接 的 方法 有 四 种 : 单 
击 “ 浏 览 文件 ”按钮 可 以 浏览 到 站 点 中 的 文件 ;直接 输入 URL; 将 * 指 向 文件 按钮 拖 电 到 
“文件 ”面板 中 的 文件 上 以 完成 文件 的 超级 链接 ;直接 拖 忠 “文件 ”面板 中 的 文件 到 “链接 ” 
下 拉 列 表 框 中 。 

“标题 "文本 框 用 于 为 超级 链接 指定 文本 工具 提示 。 

“目标 ”下 拉 列 表 框 用 于 指定 将 链接 文档 加 载 到 哪个 框架 或 窗口 , 它 包含 _blanks、 
parent, self 和 _top 四 种 情况 。 

2) 在 属性 检查 器 中 编辑 CSS 规则 

打开 属性 检查 器 ,将 光标 定位 在 一 段 已 经 使 用 了 CSS 规则 的 文本 中 , 单 击 CSS 按钮 ， 
该 规则 将 显示 在 “目标 规则 ”下 拉 列 表 框 中 或 者 直接 从 “目标 规则 ”下 拉 列 表 框 中 选择 一 个 
规则 赋予 需要 应 用 样式 的 文本 。 然 后 ,通过 使 用 CSS 属性 检查 器 中 的 各 个 选项 对 该 规则 
进行 更 改 , 如 图 3-25 所 示 。 


















属性 
om (a cs mp — [|] -*o[rs — 0 à—[-]szreszam 
a R à css i B 





图 3-25 文本 的 属性 面板 (CSS 格式 ) 


“目标 规则 ”下 拉 列 表 框 中 的 选项 是 指 在 CSS 属性 检查 器 中 正在 编辑 的 规则 。 当 文 
本 已 应 用 了 样式 规则 时 ,在 页 面 的 文本 内 部 单 击 ,将 会 显示 出 影响 该 文本 格式 的 规则 。 如 
果 要 创建 新 规则 , 则 在 “目标 规则 ”下 拉 列 表 框 中 选择 二 新 CSS 规则 选项 ,然后 单 击 “ 纺 
辑 规则 ”按钮 ,在 打开 的 “新 建 CSS 规则 ”对 话 框 中 进行 设置 即 可 。 

“编辑 规则 ”按钮 用 于 打开 目标 规则 的 CSS 规则 定义 对 话 框 。 

“CSS 面板 "按钮 是 另外 一 种 打开 CSS 样式 面板 的 方法 ,并 且 在 当前 视图 中 显示 目标 
规则 的 属性 。 

“字体 "下 拉 列 表 框 用 于 更 改 目 标 规则 的 字体 。 如 果 是 第 一 次 安装 Dreamweaver, 会 
发 现 中 文字 体 非常 少 ,选择 “字体 "下 拉 列 表 框 中 的 “编辑 字体 列表 . .. "项 ,这 时 弹出 “编辑 
字体 列表 ”对 话 框 ,如 图 3-26 所 示 。 在 “可 用 字体 ”选项 中 选择 一 种 字体 ,比如 “黑体 ”, 音 
击 国 按钮 .然后 单 击 “ 确 定 "按钮 .就 可 以 把 “黑体 " 字 加 入 字体 列表 中 了 。 

“大 小 "下拉 列表 框 用 于 设置 目标 规则 的 字体 大 小 。 
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图 3-26 “编辑 字体 列表 ”对 话 框 


“文本 颜色 ”选项 可 以 将 所 选 颜色 设置 为 目标 规则 中 的 字体 颜色 。 可 以 通过 单 击 颜 色 
框 选择 或 在 相 邻 的 文本 框 中 输入 颜色 值 。 

加 粗 和 倾斜 按钮 吾 Z: 可 以 使 选中 的 文本 加 粗 和 倾斜 。 

MH Jr Xin SS S &. 对 齐 方式 的 作用 对 象 是 整个 段落 文字 ,而 无 论 光标 
是 在 该 段 的 开始 处 、 结 尾 处 ,还 是 在 段落 中 间 , 只 要 将 光标 插入 到 需 对 齐 的 段落 中 ， 
单 击 “ 左 对 齐 ? 按 钮 “居中 对 齐 ? 按 钮 或 “ 右 对 齐 ? 按 钮 时 , 即 可 实现 所 选择 的 段落 对 
齐 方式 。 

注 :“ 字 体 ”“ 大 小 ”“ 文 本 颜色 ”“ 粗 体 "“ 和 斜体 "和 “对 齐 ” 属 性 始终 显示 当前 应 用 文 
档 窗口 中 所 选 内 容 的 规则 的 属性 ,更 改 其 中 的 任何 一 项 都 将 影响 到 目标 规则 。 


3.3.2 在 网 页 中 添加 特殊 字符 


有 时 为 了 满足 特殊 要 求 , 需 在 网 页 中 搬入 一 些 特殊 字符 。 在 Dreamweaver 中 ,这 些 
特殊 字符 可 以 通过 执行 “插入 "菜单 中 的 子 菜单 HTML 下 的 “特殊 字符 ”命令 来 插入 。 可 
插入 的 字符 类 型 如 图 3-27(a) 所 示 。 另 外 ,在 * 插 入 ?面板 的 “文本 ”类别 中 单 击 “字符 ”按钮 
上 的 箭头 后 ,如 图 3-27(b) 所 示 ,插入 的 字符 可 以 为 : 不 换行 空格 货币 符号 (如 英镑 符号 、 
日 元 符号 等 ) 版权 信息 等 。 除 了 这 些 字符 外 ,还 可 以 插入 其 他 字符 。 
m 
出 TATS 
BABE)  Shiftketurn m 


不 换行 空格 多) CtrltShifttSpace » 右 引号 
一 破 折线 
£ 英镑 符号 
€ 欧元 符号 
ARES 
© 版 权 

@ 注册 商标 
™ 商标 


其 地 字符 0) Erer 




















(a) 通过 菜单 插入 (b) 通过 工具 栏 插入 
图 3-27 插入 特殊 字符 
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3.3.3 在 网 页 中 添加 图 片 


与 文字 相 比 ,图 像 更 加 直观 .生动 。 在 网 页 中 恰当 地 使 用 图 像 ,能 够 为 网 页 增色 不 少 。 
目前 互联 网 上 支持 的 图 像 格式 主要 有 GIF JPEG 和 PNG 三 种 格式 。 

GIF 格式 (Graphics Interchange Format, 图 像 交 换 格式 ): 采用 无 损 压 缩 算法 进行 图 
像 的 压缩 处 理 , 是 目前 在 网 页 设计 中 使 用 最 普遍 、 最 广泛 的 一 种 图 像 格 式 。GIF 格式 可 以 
高 度 压缩 图 像 使 其 变 得 相当 小 , 它 在 网 页 中 大 量 用 于 动画 、 站 点 图 标 LOGO, 广告 条 及 网 
页 背景 图 像 。 它 最 多 支持 256 种 颜色 ,不 适合 用 作 照 片 级 的 网 页 图 像 。 

JPEG 格式 (Joint Photo Expert Graphics, 联 合 图 形 专 家 组 ): 是 另 一 种 在 Web 上 应 
用 广泛 的 图 像 格 式 。 由 于 它 支 持 的 颜色 数 几乎 没有 限制 ,因此 通常 用 来 显示 照片 等 颜色 
丰富 精美 的 图 像 。 与 GIF 格式 采用 无 损 压 缩 不 同 ,JPEG 格式 使 用 有 损 压缩 来 减 小 图 片 
文件 的 大 小 。 

PNG 格式 (Portable Networks Graphics, 可 移植 的 网 络 图 形 格式 ): 是 近年 来 新 出 现 
的 一 种 图 像 格 式 , 它 适 于 任何 类 型 .任何 颜色 深度 的 图 片 。 该 P| 
格式 既 融 合 了 GIF 格式 透明 显示 的 特点 ,又 具有 JPEG 处 理 | 二 
精美 图 像 的 优势 ,因此 PNG 格式 很 可 能 会 取代 GIF 格式 和 eee i 
JPEG 格式 。 

1. 插入 图 像 

在 Dreamweaver 中 插入 图 像 非常 简单 ,具体 操作 步骤 如 下 : 

CD 打开 网 页 ,在 “文档 ”窗口 中 将 光标 移 到 将 要 插入 图 
像 的 位 置 。 

(2) 选择 “插入 ”菜单 中 的 “图 像 ” 命 令 , 或 单 击 “ 常 用 ” 子 
面板 上 的 “图 像 * 按 钮 ,如 图 3-28 所 示 , 打 开 “ 选 择 图 像 源 文 
件 ” 对 话 框 ,如 图 3-29 所 示 。 
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3-29 “选择 图 像 源 文件 "对 话 框 
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(3) 在 图 3-29 所 示 的 对 话 框 中 选择 要 插入 的 图 像 文 件 ,可 以 选择 已 存放 在 当前 站 点 
中 的 图 像 文 件 ,也 可 以 在 磁盘 中 查找 其 他 的 图 像 文 件 ,然后 单 击 “ 确 定 ” 按 钮 ,此 时 ,弹出 
“图 像 标 记 辅 助 功 能 属性 ”对 话 框 ,如 图 3-30 所 示 。 这 里 会 要 求 用 户 输入 替换 文本 ,替换 
文本 就 是 当 用 户 把 鼠标 指针 放 在 图 片上 时 会 显示 的 文字 ,或 当 这 个 图 片 无 法 在 浏览 器 中 
显示 时 所 出 现 的 文字 。“ 详 细 说 明文 本 框 要 求 用 户 输入 一 个 链接 地 址 ,这 个 地 址 就 是 对 
替换 文本 的 详细 说 明 , 单 击 “ 确 定 ” 按 钮 , 即 可 在 网 页 中 插入 图 片 。 


ed 
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|; http:// 





eee naan » 请 更 改 " 铺 助 功 





3-30 “图 像 标 记 辅助 功能 属性 ”对 话 框 


注意 : 如 果 要 插入 的 图 像 文件 不 在 当前 站 点 的 文件 夹 中 ,插入 时 会 出 现 一 个 对 话 框 ， 
询问 是 否 要 将 这 个 图 像 文 件 复制 到 当前 站 点 的 文件 夹 中 ,通常 选择 “是 ”, 这 时 打开 “复制 
文件 为 ”对 话 框 ,要 求 在 站 点 中 选择 一 个 文件 夹 加 以 保存 ,这 样 可 以 保证 网 页 对 这 个 图 像 
文件 的 引用 。 

另外 一 个 快捷 插入 图 片 的 方法 需要 使 用 到 “资源 ”面板 ,在 “资源 ”面板 中 会 列 出 该 站 
点 内 包含 的 所 有 GIF、JPEG 和 PNG 文件 。 任 意 选 择 一 个 
图 片 就 会 在 “资源 ”面板 的 上 面 显 示 出 它 的 缩 略 图 ,并 且 每 
个 图 片 的 尺寸 大小、 文件 类 型 以 及 文件 的 完整 目录 都 会 列 
出 来 。 这 样 在 选择 图 片 文件 时 ,就 可 以 避免 因为 不 能 直观 
地 看 到 内 容 而 发 生 错 误 的 选择 ,如 图 3-31 所 示 。 

插入 图 片 时 只 需 将 图 片 选中 ,然后 向 文档 窗口 拖 动 ,在 
随后 出 现 的 对 话 框 内 单 击 “确定 ?按钮 就 可 以 把 图 片 插入 网 
页 中 。 另 外 一 种 方法 是 在 网 页 中 选择 图 片 所 在 的 位 置 , 然 
后 在 “资源 ”面板 中 找到 需要 插入 的 图 片 ,再 单 击 “ 插 入 ” 
按钮 。 图 3-31 “资源 ”面板 

2. 图 像 属性 设置 

在 文档 中 插入 图 像 后 , 单 击 图 像 ,图 像 四 周 出 现 可 编辑 的 缩放 手柄 ,说 明 该 图 像 被 选 
定 。 这 时 图 像 “ 属 性 ”面板 中 显示 出 关于 图 像 的 属性 信息 ,如 图 3-32 所 示 。 
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图 3-32 ”图像 “属性 ?面板 
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ID: 用 于 输入 图 像 的 名 称 , 便 于 在 Dreamweaver 行为 中 撰写 脚本 语言 (如 JavaScript) 时 
引用 该 图 像 。 该 文本 框 可 以 为 空 。 

"SERI eU. 用 于 设置 图 像 的 宽度 和 高 度 ,单位 为 像素 。 

源 文件 : 用 于 指定 图 像 的 源 文 件 。 可 单 击 文件 夹 图 标 浏览 源 文件 或 直接 输入 文件 的 
路 径 。 

链接 : 用 于 指定 图 像 的 超 链 接 。 可 单 击 文件 夹 图 标 浏览 站 点 上 的 某 个 文档 或 直接 输 
A URL. 

类 : 用 于 选择 应 用 于 指定 的 CSS 样式 。 

替换 : 指定 当 浏 览 器 找 不 到 所 需 的 图 像 或 由 于 网 络 不 畅 而 导致 图 像 下 载 失败 时 在 图 
像 所 在 位 置 显 示 的 蔡 换 文字 ;同时 ,不管 图 像 能 否 顺利 下 载 , 当 鼠 标 指 针 移 到 该 图 像 上 时 ， 
都 会 在 鼠标 指针 附近 显示 这 行 奉 换文 字 。 

“地 图 ”和 * 热 点 工具 ”( DO OS. 用 于 标注 和 创建 客户 端 映像 地 图 。 

“垂直 边 距 ”和 “水 平 边 距 ”: 用 于 为 图 像 的 边缘 添加 边 距 (单位 为 像素 ), 其 中 “垂直 边 
距 ” 是 沿 图 像 的 顶部 和 底部 添加 边 距 “水平 边 距 ” 是 沿 图 像 左 侧 和 右 侧 添加 边 距 。 

目标 : 用 于 指定 链接 的 页 面 在 浏览 器 窗口 中 显示 的 位 置 。 

对 齐 : 用 于 设置 图 像 的 对 齐 方式 。 

原始 : 用 于 指定 在 载 和 人 主 图 像 之 前 应 该 载 人 的 图 像 。 

边框 : 用 于 设置 以 像素 为 单位 的 图 像 边 框 的 宽度 。 默 认 无 边框 。 

“编辑 ”后 的 按钮 : 用 于 启动 对 图 像 各 种 编辑 ,如 对 图 像 进行 修剪 .打开 图 像 处 理 软 
件 、. 打 开 * 图 像 预览 ?对 话 框 ,调整 图 像 亮 度 和 对 比 度 等 。 

3. 改变 图 像 的 尺寸 

改变 图 像 的 尺寸 大 小 ,可 以 通过 在 属性 面板 中 的 “ 宽 " 和 “高 "文本 框 中 直接 输入 数值 
来 改变 图 像 的 尺寸 大 小 , 当 在 网 页 中 需要 精确 地 定位 元 素 时 ,这 种 方法 可 以 帮助 设计 者 达 
到 预想 的 效果 。 不 过 这 种 方法 有 一 个 丈 端 ,如 果 数 值 输入 不 当 , 可 能 造成 图 像 在 浏览 器 中 
无 法 正常 显示 。 

此 外 ,还 可 以 通过 拖 放 图 像 的 缩放 边框 来 改变 图 像 的 尺寸 。 当 选择 文档 中 的 图 像 时 ， 
在 图 像 的 周围 将 出 现 三 个 控制 点 ,将 光标 移 到 控制 点 ,然后 根据 箭头 方向 拖 动 这 些 控制 
点 , 即 可 改变 图 像 的 大 小 。 为 了 避免 造成 拖 动 的 宽度 和 高 度 比例 不 等 而 失真 .可 按 下 
Shift 键 进行 “锁定 比例 ”的 缩放 ,如 图 3-33 所 示 o 

4. 对 齐 图 像 

在 Dreamweaver 中 ,用 户 可 以 调整 图 像 在 网 页 中 的 相对 位 置 ,方法 很 简单 。 

COD 选中 页 面 中 要 编辑 的 图 像 ; 

(2) 打开 图 像 属性 面板 中 的 对齐” 下 拉 列 表 框 ,如 图 3-34 所 示 ,选择 需要 的 选项 。 

默认 值 : 通常 指定 基线 对 齐 ( 访 问 者 的 浏览 器 的 不 同 , 默 认 值 也 会 有 所 不 同 )。 

基线 和 底部 : 将 文本 (或 同一 段落 中 的 其 他 元 素 ) 的 基线 与 选 定 对 象 的 底部 对 齐 。 

顶端 : 将 图 像 的 顶端 与 当前 行 中 最 高 项 (图 像 或 文本 ) 的 顶端 对 齐 。 
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图 3-34 “对 齐 ” 下 拉 列 表 


中 间 : 将 图 像 的 中 部 与 当前 行 的 基线 对 齐 。 

文本 上 方 : 将 图 像 的 顶端 与 文本 行 中 最 高 字符 的 顶端 对 齐 。 

绝对 中 间 : 将 图 像 的 中 部 与 当前 行 中 文本 的 中 部 对 齐 。 

绝对 底部 : 将 图 像 的 底部 与 文本 行 的 底部 对 齐 。 

左 对 齐 : 将 所 选 图 像 放置 在 左边 ,文本 在 图 像 的 右 侧 换行 。 如 果 左 对 齐 文本 在 行 上 
处 于 对 象 之 前 , 它 通常 强制 左 对 齐 对 象 换 到 一 个 新 行 。 

右 对 齐 : 将 图 像 放置 在 右边 ,文本 在 对 象 的 左 侧 换行 。 如 果 右 对 齐 文本 在 行 上 处 于 
对 象 之 前 , 它 通常 强制 右 对 齐 对 象 换 到 一 个 新 行 。 


3.3.4 ”插入 图 像 占 位 符 


在 Dreamweaver 中 ,图 像 占 位 符 只 是 用 于 为 图 像 临 时 占 一 个 位 置 , 实 际 浏 览 时 , 它 将 
显示 为 一 个 义 。 当 不 能 确定 要 使 用 的 最 终 图 像 时 ,图 像 占 位 符 就 是 开发 网 页 的 一 个 有 力 
工具 。 在 网 页 中 ,有 了 图 像 占 位 符 ,无 论 有 没有 在 这 个 位 置 中 添加 图 片 都 不 会 影响 页 面 布 
局 的 整体 效果 。 插 和 图像 占 位 符 的 步骤 如 下 : 

CD 将 光标 放 在 需要 添加 图 像 占 位 符 的 位 置 。 

(2) 在 “常用 ”插入 栏 中 找到 插入 图 像 的 选项 ,在 列表 框 中 选择 “图 像 占 位 符 ” 选 项 或 
在 菜单 栏 中 执行 “插入 ”一 “图 像 对 象 x>“ 图 像 占 位 符 ” 命 令 。 


第 3 章 ” Dreamweaver 基 本 网 页 编辑 


(3) 打开 “图 像 占 位 符 ” 对 话 框 ,如 图 3-35 所 示 。 

名 称 : 输入 这 个 占 位 符 的 名 称 ,但 此 名 称 只 能 包含 小 写字 母 和 数字 ,并 且 不 能 以 数字 
HRs 

“宽度 ”和 “高 度 ”: 用 于 对 占 位 符 进 行 精确 的 高 . 宽 设置 ,默认 大 小 均 为 32 像素 。 

颜色 : 占 位 符 的 默认 颜色 是 灰色 ,也 可 以 在 拾 色 器 中 选择 其 他 颜色 。 

替换 文本 : 文本 框 中 输入 文字 ,作为 这 个 占 位 符 的 说 明文 字 。 

(4) 全 部 设置 完毕 后 , 单 击 * 确 定 ? 按 钮 即 可 成 功 插入 占 位 符 , 如 图 3-36 所 示 。 
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图 3-35 “图 像 占 位 符 " 对 话 框 图 3-36 插入 图 像 占 位 符 的 页 面 效果 


(5) 用 图 像 奉 换 占 位 符 图 像 时 ,可 以 双击 占 位 符 , 然 后 从 弹出 的 “选择 图 像 源 文件 "对 
话 框 中 选择 网 页 中 需要 的 图 像 。“ 名 称 ” 和 “替换 文本 "文本 框 中 的 属性 值 可 以 从 图 像 占 位 
符 转 换 到 新 插入 的 图 像 中 。 


3.3.5 插 人 鼠标 经 过 图 像 


在 一 个 静态 的 网 页 中 适当 地 插入 一 些 有 变化 的 图 片 ,会 让 整个 网 页 看 起 来 更 有 趣味 
性 。 在 浏览 网 页 时 经 常会 遇 到 这 样 的 情况 , 当 鼠 标 指针 经 过 某 个 图 像 时 ,会 转换 成 男 外 一 
个 图 像 ,而 当 鼠 标 指针 移 开 时 就 又 会 恢复 到 原来 的 图 像 。 这 就 是 利用 Dreamweaver 的 插 
入 鼠标 经 过 图 像 功能 来 实现 的 。 插 入 “鼠标 经 过 图 像 * 的 步骤 如 下 : 

(1) 将 光标 放 在 需要 添加 图 像 的 位 置 。 

(2) 在 “常用 ”插入 栏 中 找到 插入 图 像 的 选项 ,在 列表 框 中 选择 “鼠标 经 过 图 像 * 选 项 
或 在 菜单 栏 中 执行 “插入 ”一 “图 像 对 象 ”>“ 鼠 标 经 过 图 像 ” 命 令 。 

(3) 打开 “插入 鼠标 经 过 图 像 ” 对 话 框 ,如 图 3-37 所 示 。 
































3-37 “插入 鼠标 经 过 图 像 ? 对 话 框 
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图 像 名 称 : 为 鼠标 指针 经 过 图 像 设 置 名 称 。 

原始 图 像 : 直接 输入 或 单 击 后 面 的 “浏览 ”按钮 ,在 打开 的 对 话 框 中 可 以 选择 一 张 图 
片 作为 原始 图 像 , 也 就 是 鼠标 指针 没有 经 过 时 的 图 像 。 

鼠标 经 过 图 像 : 直接 输入 或 单 击 后 面 的 “浏览 ”按钮 ,在 打开 的 对 话 框 中 可 以 选择 一 
张 图 片 作为 鼠标 经 过 图 像 。 

替换 文本 : 文本 框 中 设置 这 个 图 像 的 说 明文 字 。 

按 下 时 ,前 往 的 URL: 设置 单 击 鼠 标 经 过 图 像 时 跳 转 到 的 链接 地 址 ,如 图 3-38 所 示 。 


Beem: [Inagel 
MAEM: [../inages/ing eift | 


wax [EER 
按 下 时 ,前往 的 URL: (travel. htal 





3-38 设置 “插入 鼠标 经 过 图 像 " 对 话 框 


(4) 全 部 设置 完毕 后 , 单 击 “确定 ”按钮 即 可 成 功 插 入 鼠标 经 过 图 像 , 在 浏览 器 中 预览 
页 面 的 效果 如 图 3-39 所 示 。 





从 超大 城市 到 巨型 城市 、 人 人 在 家 办 公 ， 工作 和 网 络 密 不 可 
从 超大 城市 到 巨型 城市 。 人 人 在 衣 办 公 ,工作 和 网 络 密 不 可 | ”| 分、 地 下 城市 在 成 长、 建造 人 工 久 ( 向 海洋 荫 二 ， 

、 地 下 城市 在 成 长 、 建 造 人 工 岛 ( 向 海洋 要 人 站 ) 、 可 容 百 万 房客 的 “让 从 大 物 ”等 ERN 

cH). ISEZES "Ric" $ S. PNRM SLOSS ROAN 

。 昌 然 这 些 未 来 城市 有 点 儿 像 海 市 拔 楼 般 HE, BRENTON, ARHERA Ben 

高 (LER » TERRINE z. 








(a) 原始 图 像 (b) 鼠标 经 过 图 像 
图 3-39 插入 鼠标 经 过 图 像 


3.4 创建 列表 


在 文档 窗口 中 ,可 以 通过 创建 编号 列表 、 项 目 列表 及 定义 列表 来 有 效 地 组 织 数据 ,并 
Hsu np UL EE. 


3.4.1 创建 项 目 列表 


项 目 列表 项 又 称 无 序列 表 . 是 一 系列 无 顺序 级 别 关 系 的 项 目 符号 组 成 的 列表 ,一般 前 
面 用 项 目 符号 作为 前 导 字 符 。 创 建 项 目 列表 的 方法 如 下 : 

在 文档 窗口 中 ,将 插入 点 放 在 要 添加 项 目 列表 的 位 置 , 单 击 “ 文 本 属性 面板 ”中 的 “项 
目 列表 ”按钮 县 ;或 者 执行 “格式 ”列表 一” 项 目 列表 ?菜单 命令 ,还 可 执行 “插入 ”一 
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HTML- 盖 文本 对 象 "项 目 列表 ? 某 单 命令 添加 ,指定 列表 项 的 项 目前 导 字 符 出 现在 文 
档 窗 口中 。 

在 项 目前 导 字 符 后 输入 项 目 列表 项 文本 ,然后 按 Enter 键 , 下 一 个 项 目前 导 字 符 自动 
出 现在 新 行 的 前 面 , 重 复 上 述 操作 直至 完成 项 目 列表 的 创建 , 按 两 次 Enter 键 完成 整个 项 
目 列表 的 创建 ,如 图 3-40 所 示 。 

若 要 添加 项 目 列表 的 文本 已 经 存在 .也 可 将 这 些 文本 选 定 ,使 用 上 述 方法 ,一 次 性 给 
文本 添加 项 目 符号 。 

当然 ,也 可 在 HTML 代码 中 ,由 标记 二 ul 二 来 定义 。 不 过 ,此 部 分 已 在 第 2 章 讲 过 ， 
SEAL AS FE BEG, 





<body> 个 人 爱好 
。 游泳 <ul types"disc"> um 
. 长 跑 gr ID 
打球 De 
</ul> 
</body> imi 
图 3-40 ”设计 视图 和 代码 视图 中 的 二 ul 二 标记 图 3-41 添加 编号 前 后 的 效果 比较 


3.4.2 创建 编号 列表 


编号 列表 项 又 称 有 序列 表 , 是 有 一 定 排列 顺序 的 列表 ,一 般 前 面 有 数字 前 导 字符 ,可 
以 是 阿拉 伯 数 字 、 英 文字 母 . 罗 马 数字 等 符号 。 创 建 编号 列表 的 方法 如 下 : 

在 文档 窗口 中 ,将 插入 点 放 在 要 添加 编号 列表 的 位 置 , 单 击 “ 文 本 属性 面板 ”中 的 “ 编 
号 列表 "按钮 记 |; 或 者 执行 “格式 >“ 列表” 一 “编号 列表 ”菜单 命令 ,还 可 执行 “插入 ”一 
HTML->“ 文 本 对 象 ">“ 编 号 列表 ”菜单 命令 添加 .指定 列表 项 的 数字 前 导 字 符 出 现在 文 


符 自动 出 现在 新 行 的 前 面 ,重复 上 述 操 作 直 至 完成 编号 列表 的 创建 , 按 两 次 Enter 键 完成 
整个 编号 列表 的 创建 。 

若 要 添加 编号 的 文本 已 经 存在 ,也 可 将 这 些 文本 选 定 ,使 用 上 述 方法 ,一 次 性 给 文本 
添加 编号 。 图 3-41 所 示 的 就 是 添加 编号 前 后 的 效果 比较 。 

同 前 ,也 可 在 HTML 代码 中 由 标记 二 ul 二 定义 。 


3.4.3 列表 属性 设置 


首先 将 文字 按照 无 序 或 有 序列 表 方 式 进行 列表 设置 ,然后 将 光标 移 到 列表 文字 中 。 
单 击 “ 文 本 属性 面板 ”中 的 “列表 项 目 ” 按 钮 ,或 者 执行 “格式 ”>“ 列 表 ” 一 “属性 ”菜单 命令 ， 
弹出 “列表 属性 ”对 话 框 ,如 图 3-42 所 示 。 

列表 类 型 : 列表 类 型 共 分 为 四 类 : 项 目 列表 编号 列表 、 目 录 列表 和 菜单 列表 。 项 目 
列表 的 段 首 为 图 案 标 志 符 号 .是 无 序列 表 ; 编 号 列表 的 段 首 为 数字 ,是 有 序列 表 。 选 择 “ 编 
号 列表 ”选项 后 ,列表 属性 对 话 框 中 的 隐藏 选项 会 变 为 有 效 。 

样式 : 列 出 了 默认 项目 符号 和 正方 形 三 个 可 选项 .默认 使 用 的 是 项 目 符号 , 段 首 标 
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图 3-42 “列表 属性 ”对 话 框 
记 为 实心 圆 点 ;项 目 符号 选项 是 段 首 标记 为 项 目的 符号 ;正方 形 选项 的 段 首 标记 为 实心 
方块 。 
新 建 样式 : 用 来 设置 光标 所 在 段 和 以 下 的 列表 属性 ,如 图 3-43 所 示 。 























图 3-43 “新 建 样式 ”下 拉 列 表 框 


开始 计数 : 可 以 输入 起 始 的 数字 或 字母 ,以 后 各 段 的 编号 将 根据 起 始 数字 或 字母 自 
动 排列 。 


3.5 在 网 页 中 使 用 多 媒体 对 象 





Dreamweaver 中 可 以 非常 方便 .快捷 地 在 网 页 中 添加 动画 .声音 等 媒体 文件 。 媒 体 
对 象 是 一 个 用 户 添 加 到 页 面 上 的 项 目 , 需 要 插入 插件 才能 在 浏览 器 中 正常 播放 ,例如 
Adobe Flash 影片 或 者 对 象 .QuickTime 或 者 Adobe shockwave 影片 Java Applets、 其 他 
音频 或 视频 对 象 。 插 件 是 安装 在 访问 者 浏览 器 里 的 特殊 程序 扩展 ,以 便 能 让 用 户 查 看 多 
媒体 内 容 。 有 了 这 些 元 素 的 加 入 .网 页 看 起 来 就 会 更 有 趣味 性 与 观赏 性 。 


3.5.1 多 媒体 对 象 的 格式 


目前 Flash 动画 是 网 页 应 用 中 最 广泛 的 一 个 领域 ,Flash 文件 包括 以 下 几 种 类 型 : 

. fla 一 一 Flash 的 源 文件 格式 ,不 能 直接 在 Dreamweaver 中 打开 ,需要 在 Flash 中 打 
开 后 输出 为 SWF 文件 才能 被 Dreamweaver 使 用 。 

.swf 一 一 由 Flash 文件 格式 (. fla 格式 ) 输 出 的 影片 文件 ,该 格式 已 经 经 过 了 优化 ,能 
够 在 浏览 器 或 Dreamweaver 中 打开 或 使 用 。 已 经 输出 的 SWF 是 不 能 在 Flash 中 编辑 
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的 。 它 是 为 网 页 添加 Flash 按钮 或 文字 对 象 时 所 创建 的 文件 格式 。 
Flash 元 素 文件 格式 , 它 里 面 有 可 以 自 定义 的 参数 .通过 修改 这 些 参数 可 以 
执行 不 同 的 应 用 程序 。 

. flv 一 一 Flash 视频 文件 格式 , 它 包 含 经 过 编码 的 音频 和 视频 数据 ,用 于 通过 Flash 
Player 传送 。 


3.5.2 使 用 声音 与 视频 


1. 音频 

网 页 中 常用 的 声音 格式 包括 以 下 几 种 : 

WAV 一 一 具有 较 好 的 声音 品质 ,许多 浏览 器 都 支持 此 类 文件 并 且 不 要 求 插件 。 可 以 
从 CD\ 磁 带 ,麦克 风 等 录制 自己 的 WAV 文件 ,但 文件 较 大 。 

MP3 一 一 最 大 的 特点 就 是 能 以 较 小 的 比特 率 、 较 大 的 压缩 比 达到 近乎 完美 的 CD 音 
质 。 可 以 用 MP3 格式 对 WAV 音乐 文件 进行 压缩 , 既 可 以 保证 效果 ,也 可 以 减少 文件 的 
大 小 。 

WMA 一 一 这 种 格式 是 Windows Media Player 的 格式 ,特点 是 文件 小 .音质 较 好 , 适 
合 在 网 络 上 传播 。 很 多 在 线 播放 音乐 的 网 站 都 将 音乐 文件 保存 为 这 种 格式 。 

MIDI 一 一 这 种 格式 用 于 乐器 。 许 多 浏览 器 都 支持 MIDI 文件 并 且 不 要 求 插件 。 
MIDI 文件 不 能 被 录制 并 且 必 须 使 用 特殊 的 硬件 和 软件 在 计算 机 上 合成 。 所 以 , 随 着 网 
络 的 发 展 ,逐步 被 MP3 和 WMA 取而代之 了 。 

. RA、. RAM,. RM 或 Real Audio 格式 一 一 具有 非常 高 的 压缩 比 ,文件 大 小 要 小 于 
MP3。 在 Web 服务 器 上 采用 “ 流 式 处 理 ” 方 式 , 所 以 访问 者 在 文件 完全 下 载 完 之 前 即 可 听 
到 声音 。 但 访问 者 必须 下 载 并 安装 RealPlayer 播放 器 才 可 以 播放 这 些 文件 。 

2. 视频 

RMVB: 这 种 格式 采用 流 媒体 方式 传输 ,所 以 即使 网 速 慢 ,也 能 提供 清晰 ,不 中 断 的 
影音 给 访问 者 ,但 必须 下 载 并 安装 播放 器 才 可 以 播放 这 些 文件 。 

MOV ; 原本 是 苹果 电脑 中 的 视频 文件 格式 ,自从 有 了 Quicktime 驱动 程序 后 ,也 可 
以 在 PC 上 播放 . mov 文件 了 。 

MPG 、 MPEG: 这 种 格式 是 活动 图 像 专家 组 (Moving Picture Experts Group) ff) Ai 
写 。MPEG 实质 是 电影 文件 的 一 种 压缩 格式 。MPG 的 压缩 率 比 AVI 高 ,画面 质量 比 
AVI 好 。 

AVI, 这 种 格式 是 微软 推出 的 视频 文件 格式 . 它 应 用 广泛 ,曾经 是 视频 文件 的 主流 。 





.SWC 





3.5.3 插入 Flash 


1. 插入 Flash 动画 

(1) 在 Dreamweaver 中 插入 Flash 动画 文件 (SWF) 之 前 ,要 先 确定 插入 Flash 的 
位 置 。 

(2) 单 击 “ 插 入 ”面板 上 的 “常用 ”选项 卡 中 的 “媒体 ”按钮 旁 的 下 三 角 按钮 ,或 者 执行 
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“插入 ”媒体 ”菜单 命令 ,在 弹出 的 下 拉 菜 单 中 选择 SWF 命令 ,如 图 3-44 所 示 。 

















图 3-44 选择 SWF 命令 


(3) 选择 SWF 命令 后 ,弹出 “选择 SWF” 对 话 框 ,如 图 3-45 所 示 o 























|] 
: [STF 文件 o 























图 3-45 选择 SWF 文件 


(4) 在 本 地 计算 机 中 选择 一 个 SWF 文件 , 单 击 “ 确 定 ” 按 钮 ,就 可 以 执行 添加 Flash 
动画 的 命令 了 。 但 是 一 般 情况 下 ,在 网 页 中 使 用 的 文件 如 果 没 有 提前 把 它们 放 在 站 点 目 
录 下 ,就 会 弹出 一 个 提示 需要 重新 保存 文件 的 对 话 框 ,如 图 3-46 所 示 。 


E 0358 
Ec 
全 "ovlio pey 





文件 位 于 站 点 mnyfirstweb' 的 根 文件 夹 以 外 
当 悠 发 布 站 点 时 可 能 不 能 访问 











: m 88 (| NN 
: [FARA n z Ca) 


图 3-46 重新 保存 文件 的 对 话 框 
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(5) 单 击 “ 确 定 ” 按 钮 弹出 “对 象 标 记 辅 助 功能 属性 ”对 话 框 ,如 图 3-47 所 示 。 

标题 : 为 插入 的 Flash 动画 添加 标题 。 

访问 键 : 为 动画 输入 一 个 单字 符 的 访问 键 。 在 浏览 器 中 可 以 通过 按 下 “Alt 十 访问 
键 ?来 选择 这 个 动画 。 

Tab RI: 设置 一 个 数字 ,通过 这 个 数字 可 指定 网 页 中 对 象 和 链接 的 跳 转 顺序 。 
如 果 用 户 和 希望 设置 的 数字 生效 ,最 好 为 其 他 的 网 页 对 象 也 进行 Tab 键 的 设置 。 

(6) 单 击 “ 确 定 ” 按 钮 后 就 完成 了 Flash 动画 的 导入 ,然后 Dreamweaver 的 文档 窗口 
中 就 会 有 一 个 灰色 的 区 域 ,其 中 有 一 个 Flash 的 标志 ,如 图 3-48 所 示 。 灰 色 部 分 就 是 添 
加 的 Flash 动画 ,当前 这 个 灰色 区 域 的 尺寸 就 是 导入 的 Flash 原始 尺寸 。 如 果 要 修改 它 
的 尺寸 ,可 以 直接 拖 动 Flash 动画 右边 .下 边 和 右 下 角 的 控制 点 。 
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图 3-47 “对 象 标记 辅助 功能 属性 ”对话 框 3-48 插入 Flash 动画 


(7) 保存 文件 , 按 F12 功能 键 预 览 。 
(8) 导入 的 Flash 动画 在 文档 窗口 中 显示 为 图 标 ( 大 小 与 Flash 动画 原 尺 寸 相同 ) ,在 
属性 面板 中 可 以 设 定 导 入 Flash 动画 的 属性 ,如 图 3-49 所 示 。 








SH, 72K [sw£fnovlT 1. swf BD FRAO dus zo [tav fr] 








Emp — emu amope H opa HE m ) 
一 HAS [了 KW emer) — [] seal Lem. ) 


图 3-49 Flash 动画 的 属性 











文件 : 通常 显示 页 面 指向 的 Flash 文件 的 路 径 。 

源 文件 : 用 来 指向 Flash 动画 的 源 文档 的 路 径 , 在 对 动画 进行 编辑 时 可 以 在 这 里 设 
置 动 画 的 源 文件 路 径 。 

循环 : 勾 选 时 ,动画 将 连续 播放 ,否则 ,播放 一 次 后 即 停止 。 建 议 选 中 此 项 。 

自动 播放 : 设 定 Flash 文件 是 否 在 页 面 加 载 时 就 播放 ,建议 选中 此 项 。 

品质 : 选择 播放 Flash 动画 的 画 质 ,在 动画 播放 期 间 控制 对 抗 失 真 。 对 于 一 些 需 要 
很 好 地 显示 质量 的 动画 要 使 用 高 品质 的 设置 .需要 更 快 的 处 理 器 来 正确 泻 染 画 面 。 将 动 
画 设置 低 品质 可 以 使 显示 的 速度 加 快 ,不 过 显示 的 效果 就 会 差 很 多 。 
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比例 : 可 以 选择 “默认 (全 部 显示 )”“ 无 边框 >“ 严格 匹配 ?三 种 。 

编辑 : 单 击 该 按钮 后 会 自动 切换 并 打开 Adobe Flash, 这 样 用 户 就 可 以 直接 在 Flash 
软件 中 对 动画 进行 修改 。 

播放 : 查看 动画 在 网 页 编辑 窗口 中 的 预览 效果 。 

2. 插入 Flash 视频 文件 (FLV) 

(D). 在 Dreamweaver 中 插入 Flash 视频 文件 (FLV) 之 前 ,要 先 确定 要 插入 视频 的 
位 置 。 
(2) 单 击 “ 插 入 "面板 上 的 “常用 ”选项 卡 中 的 “媒体 ”按钮 旁 的 下 三 角 按钮 ,或 者 执行 
“插入 ”一 “媒体 ”菜单 命令 ,在 弹出 的 下 拉 菜 单 中 选择 FLV 命令 ,如 图 3-50 所 示 。 


Dw m- 9- á- 
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3-50 插入 Flash 视频 文件 菜单 


(3) 选择 FLV 命令 后 ,弹出 * 插 入 FLV? 对 话 框 , 如 图 3-51 所 示 。 











《输入 FLY 文件 的 相对 或 绝对 路 径 ) 
i [Clear Skin 1 (最 小 宽度 :140) 
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@ 要 观看 视频 ,请 在 浏览 器 中 预览 页 面 





图 3-51 “插入 FLV” 对 话 框 


在 “视频 类 型 "下 拉 列 表 框 中 选择 “累进 式 下 载 视频 ”选项 ,并 单 击 “ 浏 览 ” 按 钮 ,在 弹出 
的 对 话 框 中 找到 一 个 FLV 格式 的 视频 文件 。 在 “外 观 ” 下 拉 列 表 框 中 选择 一 个 播放 器 皮 
肤 。 可 设置 视频 的 宽度 和 高 度 ,如 果 想 要 视频 原来 的 尺寸 .或 以 它 原来 的 尺寸 作为 参考 ， 
可 以 单 击 “ 检 测 大 小 ”按钮 ,这 样 视频 的 尺寸 就 自动 显示 在 宽度 和 高 度 的 文本 框 中 。 如 果 
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希望 无 须 单 击 任何 控制 按钮 就 能 够 观看 视频 ,可 以 选中 “自动 播放 ” 复 选 框 。 车 选中 “自动 
重新 播放 ? 复 选 框 , 则 视频 会 一 直 循环 播放 。 
(4) 单 击 “ 确 定 ” 按 钮 , FLV 文件 就 以 一 个 视频 文件 图 标 插 入 到 页 面 中 ,如 图 3-52 所 示 。 
(5) 保存 文件 , 按 F12 功能 键 预览 ,预览 视频 效果 如 图 3-53 所 示 。 





图 3-52 HHA FLV 文件 的 效果 图 3-53 ”预览 视频 效果 


3.5.4 在 网 页 中 添加 其 他 插件 


使 用 插件 可 以 在 页 面 中 添加 不 同 的 视频 文件 和 音频 文件 ,用 户 可 以 把 平常 使 用 的 
.avi 文 件 或 . mp3 文件 插入 网 页 中 ,以 增强 它 在 视觉 和 听觉 方面 的 效果 。 

1. 插入 其 他 视频 文件 

除了 能 够 在 网 页 中 插入 Flash 的 影片 和 视频 文件 外 ,用 户 还 可 以 插入 其 他 格式 的 视 
频 文件 。 比 如 QuickTime 的 MOV 格式 文件 ,Windows Media 的 AVI 格式 文件 等 , 它们 
的 插入 方法 差不多 。 下 面 介绍 插入 MOV 格式 的 视频 文件 的 步 又 : 

CD 单 击 * 常 用 ”插入 栏 中 的 “媒体 ”按钮 ,在 弹出 的 下 拉 列 表 框 中 选择 “ 择 件 ” 选 项 ,如 
图 3-54 所 示 。 在 弹出 的 对 话 框 中 从 本 地 计算 机 中 选择 一 个 已 经 准备 好 的 MOV 格式 的 
文件 ,如 图 3-55 所 示 。 
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图 3-54 插入 插件 命令 


(2) 单 击 “ 确 定 ” 按 钮 ,就 可 以 直接 将 这 个 视频 文件 插入 页 面 中 。 通 过 插件 添加 到 页 
面 中 的 文件 都 会 显示 为 一 个 插件 的 图 标 ,而 且 无 论 用 户 插入 的 文件 尺寸 有 多 大 ,它们 最 初 
都 是 以 Dreamweaver 中 的 默认 大 小 显示 ,如 图 3-56 所 示 。 

(3) 选中 图 标 用 来 改变 大 小 的 控制 点 进行 拖 动 ,放大 插件 图 标的 区 域 ,保存 文件 , 按 
F12 功能 键 预览 。 
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图 3-55 “选择 文件 ”对话 框 图 3-56 插入 视频 插件 








2. 为 网 页 添加 声音 文件 

有 些 网 页 打开 时 美妙 的 音乐 就 会 随 着 页 面 的 打开 开始 播放 ,或 者 可 以 直接 在 页 面 上 
试听 各 种 不 同 的 音乐 。 这 其 实 是 在 页 面 中 插入 了 声音 文件 。 

(D 在 Dreamweaver 中 确定 要 插入 声音 文件 的 位 置 。 

(2) 单 击 * 插 入 ?面板 上 的 “常用 ?选项 卡 中 的 “媒体 "按钮 旁 的 下 三 角 按 钮 ,或 者 执行 
“插入 ”一 “媒体 ”菜单 命令 ,在 弹出 的 下 拉 莱 单 中 选择 “插件 "命令 。 

(3) 打开 “选择 文件 ”对 话 框 ,在 本 地 计算 机 中 选择 一 个 声音 文件 ,例如 可 以 选择 一 
个 . mp3 格式 的 声音 文件 , 单 击 “ 确 定 ” 按 钮 ,将 其 添加 到 页 面 中 。 

(4) 在 文档 窗口 中 仍然 只 是 显示 了 一 个 很 小 的 插件 图 标 ,为 了 使 它 的 播放 器 能 在 预览 
时 全 部 显示 出 来 ,需要 在 Dreamweaver 中 将 其 长 和 宽 都 拖拉 成 合适 的 大 小 ,如 图 3-57 Bros 

(5) 保存 文件 , 按 F12 功能 键 在 浏览 器 中 预览 插入 的 声音 文件 , 单 击 播放 器 上 的 “ 播 
放 ” 按 钮 ,插入 的 音乐 就 开始 播放 了 ,如 图 3-58 Bron. 
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3-57 插入 声音 插件 3-58 ”播放 插入 的 声音 文件 


3.6 插入 其 他 对 和 象 





3.6.1 插 人 日 期 


Dreamweaver 提供 了 一 个 方便 的 日 期 对 象 ,使 用 该 对 象 可 允许 用 户 选择 自己 喜欢 的 
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格式 插入 当前 日 期 (包含 或 不 包含 时 间 都 可 以 ) ,而且 还 可 以 选择 在 每 次 保存 文件 时 都 自 
动 更 新 该 日 期 。 插 入 日 期 的 步骤 如 下 : 

将 光标 置 于 要 插入 的 位 置 ,选择 “插入 "菜单 中 的 “日 期 "命令 ,或 单 击 “ 常 用 ”工具 栏 上 
的 日 期 按钮 加 ,将 弹出 “插入 日 期 "对 话 框 ,如 图 3-59 所 示 。 

















me meje 


时 间 格式 ; | [不 要 时 间 ] 
O 储存 时 自动 更 新 








3-59 ”插入 日 期 


从 “星期 格式 ”下 拉 列 表 框 中 可 选择 星期 的 显示 格式 ,当然 也 可 以 不 显示 星期 ;从 “日 
期 格式 ”列表 框 中 可 选择 要 插入 的 日 期 的 显示 格式 ,例如 选择 “年 -月 -日 "的 显示 格式 ; 从 
“时 间 格 式 ” 下 拉 列 表 框 中 可 选择 要 插入 的 时 间 格 式 , 时 间 格 式 有 两 种 , 即 12 小 时 计时 法 
和 24 小 时 计时 法 ,当然 也 可 设置 不 要 时 间 。 

若 选择 “储存 时 自动 更 新 " 复 选 框 ,这 样 在 每 次 保存 文档 时 都 可 更 新 插入 的 日 期 和 时 
间 。 设 置 完 毕 单 击 “ 确 定 ” 按 钮 即 可 完成 日 期 的 插入 。 


3.6.2 插 人 水平线 


水 平分 隔 线 对 于 信息 的 组 织 很 有 用 。 在 页 面 中 ,可 以 使 用 一 条 或 多 条 水 平分 隔 线 以 
分 隔 文本 和 对 象 。 插 和 水平 线 的 方法 如 下 : 

在 文档 窗口 中 ,将 插入 点 放 在 要 插入 水 平 线 的 位 置 ,在 “插入 " 栏 的 “常用 ”工具 栏 上 的 
HTML 选项 卡 中 单 击 “ 水 平 线 " 按 钮 劝 ,或 者 执行 “插入 "菜单 下 的 子 菜单 HTML 中 的 
“水 平 线 ” 命 令 来 添加 水 平 线 。 另 外 ,选中 插入 的 这 条 水 平 线 ,可 以 在 属性 面板 对 它 的 属性 
进行 设置 ,如 图 3-60 所 示 。 
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3-60 水平 线 属性 面板 















































3.7 案例 实践 


3.7.1 案例 需求 说 明 


使 用 Dreamweaver 设计 图 3-61 所 示 的 网 页 。 
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图 3-61 旅游 商务 网 站 主页 面 


3.7.2 技能 训练 要 点 





AELE LINEEI 
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可 以 利用 第 2 章 讲 过 的 表格 及 页 面 排版 的 相关 内 容 对 网 页 进行 布局 和 设计 ,主要 训 


练 要 点 有 以 下 5 个 : 
CD 了 解 网 页 设计 常用 的 版 式 ; 
(2) 掌握 绘制 及 编辑 布局 表格 和 布局 单元 格 ; 
(3) 掌握 利用 布局 表格 的 谤 套 设计 较 复杂 的 版 面 ; 
(4) 掌握 在 布局 表格 中 添加 具体 内 容 ; 
(5) 掌握 设置 布局 表格 和 单元 格 属性 。 


3.7.3 案例 实现 


根据 需求 说 明 中 的 网 页 的 表现 形式 ,可 以 画 出 该 网 页 的 版 式 结 构 , 如 图 3-62 所 示 。 

在 进行 该 网 页 布局 时 , 先 要 设计 最 外 面 的 表格 ,然后 设计 最 上 端的 表格 ,用 来 放置 
LOGO 和 BANNER ,然后 再 设计 一 个 单元 格 放置 导航 菜单 .接着 下 面 设计 三 个 并 排 的 表 
格 , 分 别 放置 左边 的 导航 ,中 间 的 网 页 内 容 , 右 边 的 网 页 内 容 , 最 下 面 再 设计 一 个 单元 格 ， 


放置 版 权 信息 。 具 体 实现 步骤 如 下 : 
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LOGO BANNER 





导航 菜单 





导航 网 页 内 容 网 页 内 容 











版 权 信息 











3-62 ”网 页 结构 图 


CD 新 建 一 个 文档 ,打开 “属性 ”面板 , 单 击 厂 页 面 属性 ... 按钮 ,在 弹出 的 “页 面 属 
性 ?对 话 框 中 将 “背景 图 像 ” 设 为 bg-greenline. jpg. 
(2) 将 “插入 ” 栏 中 的 “常用 ”选项 卡 改 为 “布局 ”选项 卡 ,此 时 就 出 现 “ 布 局 "工具 栏 ,如 
图 3-63 所 示 。 
布局 v 图 e fs (sw [FR [95] ( mls swt (B - EB 
图 3-63 “布局 "选项 卡 





(3) 单 击 布局 工具 栏 中 的 [市 局 | 按 钮 ,进入 布局 模式 。 

(4) 首次 执行 以 上 操作 之 后 ,会 打开 “从 布局 模式 开始 "对话 框 , 在 该 对 话 框 中 给 出 在 
“布局 模式 ”下 创建 表格 的 方法 的 提示 。 单 击 [ wem _] 按 钮 即 可 切换 到 布局 模式 。 切 换 到 
“布局 ”模式 后 ,在 “文档 "窗口 的 顶部 会 出 现 标 有 “布局 模式 ”的 蓝 色 长 条 。 

(5) 在 “插入 ” 栏 的 “布局 ”选项 卡 中 单 击 “ 绘 制 布局 表格 "按钮 税 |。 

(6) 将 光标 放置 在 页 面 上 ,此 时 光标 变 为 加 号 (十 )。 

CD 将 鼠标 光标 移 到 要 创建 表格 的 左上 角 位 置 并 按 住 鼠标 不 放 拖 动 到 要 创建 表格 的 
右 下 角 后 释放 鼠标 。 

(8) 选中 该 表格 ,打开 属性 面板 ,将 表格 的 宽度 设 为 800px, 高 度 设 为 900px。 

(9) 在 “插入 ” 栏 的 “布局 ”选项 卡 中 单 击 “ 绘 制 布局 表格 ”按钮 胶 。 将 鼠标 光标 放置 
在 刚才 绘制 的 表格 的 左上 角 , 拖 动 鼠 标 ,绘制 一 个 嵌 套 表格 ,规格 为 : 宽度 800px, 高 
度 100px。 

(10) 选中 该 表格 ,切换 到 “标准 "模式 ,将 背景 图 像 改 为 logl-text. jpg. 

aD 再 切换 到 “布局 "模式 ,在 “插入 ” 栏 的 “布局 ”选项 卡 中 单 击 “ 绘 制 布局 单元 格 " 按 
MEL 选中 该 单元 格 ,打开 属性 面板 ,将 单元 格 的 宽度 设 为 111px, 高 度 设 为 101px, 水 平 
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对 齐 方式 设 为 “ 左 对 齐 ” ,垂直 对 齐 方式 设 为 “顶端 ”。 

(12) 将 图 像 niux-home. gif 插入 到 该 单元 格 ,打开 属性 面板 ,将 其 宽 设 为 35px, 高 设 
为 30px, 对 齐 方式 设 为 “绝对 居中 ”, 在 紧 接 着 该 图 像 的 旁边 写 上 文字 “加 入 收藏 ”, 同 时 将 
该 文字 设 为 : 字体 “宋体 ”, 大 小 12px。 

(13) 将 “插入 ” 栏 中 的 “布局 ”选项 卡 改 为 “文本 ”选项 卡 , 单 击 “ 换 行 符 " 按 钮 吧 有 光标 
自动 定位 到 下 一 行 。 

COLD 将 “插入 ” 栏 中 的 “文本 ”选项 卡 改 为 “布局 ”选项 卡 ,进入 “布局 ”模式 ,重复 步骤 
(11) 、(12) 两 次 。 

(15) 在 “插入 " 栏 的 “布局 ?选项 卡 中 单 击 * 绘 制 布局 单元 格 " 按 钮 园 . 选中 该 单元 
t ,打开 属性 面板 ,将 单元 格 的 宽 设 为 800px, 高 设 为 29px, 水 平 对 齐 设 为 “居中 对 齐 ”, 垂 
直 设 为 “居中 ”, 背 景 颜色 设 为 “# FF9900”。 

(16) 将 光标 定位 到 该 单元 格 , 输 入 文字 “首页 ”, 然 后 将 “插入 ” 栏 中 的 “布局 ”选项 卡 
改 为 “文本 ”选项 卡 , 单 击 “ 不 换行 空格 ”按钮 此 | 两 次 ,出 现 了 两 个 空格 , 紧 接 着 输入 “|”( 该 
符号 用 键盘 上 的 “Shift 十 \” 输 入 ) ,再 单 击 “ 不 换行 空格 ”按钮 出 | 两 次 , 紧 接 着 输入 “国内 旅 
游 ”, 后 面 文字 按 相同 方法 输入 ,选中 导航 栏 的 所 有 文字 ,将 其 设 为 : 字体 “宋体 ”, 大 小 
14px, 颜 色 “ # 000099”, 

AT) 紧 接 导航 栏 的 布局 单元 格 ,在 它 下 方 绘制 一 个 宽 为 181px, 高 为 665px, 颜 色 为 
“ & DDES6C” (I ii Jed d it ,用 来 放 左边 导航 内 容 。 

(18) 在 该 布局 表格 内 绘制 一 个 宽 181 px ie 73px 的 布局 单元 格 ,然后 将 ygdd. jpg 图 
像 插入 到 该 单元 格 ,同时 设 该 图 像 的 宽 为 181px, 高 为 73px。 

(19) 紧 接 上 面 的 布局 单元 格 ,在 它 下 方 绘制 一 个 宽 181px、 高 60px, 水 平 对 齐 为 “ 居 
中 对 齐 ”, 垂 直 为 “居中 ”的 布局 单元 格 , 输 入 文字 “人文 地 理 ”, 同 时 将 该 文字 设 为 : 字体 
“HEA” AD 18px, 颜 色 “#CC0033”。 

(200 紧 接 上 面 的 布局 单元 格 , 在 它 下 方 绘制 一 个 宽 181px、 高 98px 的 布局 表格 。 

(21) 在 上 面 的 布局 表格 内 绘制 一 个 宽 26px、 高 96px 的 布局 单元 格 。 

(22) 在 上 面 的 布局 单元 格 右 边 绘制 一 个 宽 153px、 高 24px, 垂 直 *“ 居 中 ”的 布局 单元 
格 , 输 入 文字 “ 口 自然 环境 ”(*“ 口 "的 输入 : 在 “智能 abc” 输 入 法 下 按键 盘 符 号 v 十 数字 D. 
将 其 设 为 : 字体 “宋体 ”, 大 小 14px。 

(23) 在 上 面 的 布局 单元 格 下 面 绘制 一 个 宽 153px、 高 24px, 垂 直 * 居 中 ”的 布局 单元 
格 , 输 入 文字 “口气 候 变 化 ”, 将 其 设 为 : 字体 “宋体 ”, 大 小 14px。 

(24) 重复 步骤 (22) 两 次 ,同时 将 输入 的 文字 分 别 改 为 “ 口 人 口 .语言 "、“ 口 宗教 \ 信 
w”, 

(25) 紧 接 上 面 的 布局 表格 ,在 它 下 方 绘制 一 个 宽 181px、 高 60px, 水 平 对 齐 为 “居中 
对 齐 ”, 垂 直 为 “居中 ”的 布局 单元 格 ,输入 文字 “民族 风情 ,同时 将 该 文字 设 为 : 字体 “ 楷 
体 ”, 大 小 18px, 颜 色 “ 井 CC0033?”。 

(26) 重复 步骤 (20)、(21)、(22)、(23) ,将 输入 的 文字 分 别 改 为 “ 口 民 间 风 俗 >"“ 口 服 
饰 与 音乐 >*“ 口 民族 节日 "“ 口 生活 习惯 ”。 

(27) 重复 步骤 (25) ,将 输入 的 文字 改 为 “旅游 指南 ”。 
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(28) 重复 步骤 (19)、(20)、(21)、(22)、(23), 将 输入 的 文字 分 别 改 为 “ 口 自驾 车 旅游 
须知 ”“ 口 潜水 的 医学 知识 ”“ 口 散 客 旅游 指南 ”、“ 口 自助 游 常识 ”。 

(29) 左边 的 导航 做 好 了 ,将 光标 定位 到 中 间 的 网 页 内 容 区 ,绘制 一 个 宽 418px、 高 
665px, 颜 色 为 ^#FFFFFF” 的 布局 表格 。 

GO) 在 该 布局 表格 内 绘制 一 个 宽 418px、 高 239px 的 布局 表格 。 

(31) 在 该 布局 表格 内 绘制 一 个 宽 126px, ie 239px, 垂 直 为 “居中 ”的 布局 单元 格 , 然 
后 将 love. jpg 图 像 插入 到 该 单元 格 , 同 时 设 该 图 像 的 宽 为 126px。 

(32) 在 上 面 的 布局 单元 格 右边 绘制 一 个 宽 278px, i 239px 的 布局 表格 。 

(33) 在 上 面 的 布局 表格 内 绘制 一 个 宽 278px、 高 42px, 水 平 “ 居 中 对 齐 ” ,垂直 “居中 ” 
的 布局 单元 格 ,将 plane. jpg 图 像 插 入 到 该 单元 格 。 

(34) 返回 到 “标准 ”模式 ,选择 “插入 ”一 “表格 "菜单 命令 ,插入 一 个 5 行 4 列 , 宽 
278px、 高 194px, 边 框 1 的 表格 ,将 第 1 列 宽 设 为 54px, 第 2 列 宽 设 为 110px, 第 3 列 宽 
设 为 52px, 第 4 列 宽 设 为 50px, 每 行 高 都 设 为 30px, 单 击 第 一 单元 格 , 设 置 : 水 平 “居中 
对 齐 ”, 垂 直 “ 居 中 ”, 输 入 文字 “出 发 地 ”, 将 文字 设 为 : 字体 “宋体 ”, 大 小 12px, 颜 色 
* & 990066", 

(350. 按照 同样 的 方法 ,完成 该 表格 的 制作 , 且 将 其 余 各 行文 字 设 为 : 字体 “宋体 ”, 大 
小 12px, 颜 色 “#0000CC”。 

(36) 紧 接 着 第 (29) 步 的 布局 表格 的 下 方 绘制 一 个 宽 418px、 高 52px, 背 景 图 像 为 
fj01. jpg 的 布局 表格 ,然后 再 在 该 布局 表格 内 偏 左 的 位 置 绘制 宽 156px、 高 52px, 水 平 对 
齐 “ 居 中 对 齐 ”, 垂 直 “ 居 中 ”的 布局 单元 格 ,输入 文字 “风景 名 胜 快 览 ”, 将 文字 设 为 : 字体 
“楷体 ”, 大 小 24px, Ki t“ # FF0000”, 

注意 : 设置 表格 背景 图 像 时 一 定 要 从 “布局 "模式 下 退出 ,进入 "标准 ”模式 进行 设置 。 

(37) 紧 接 上 面 的 布局 表格 ,在 它 下 方 绘制 一 个 布局 表格 ,在 该 布局 表格 内 绘制 一 个 
宽 418px、 高 10px 的 布局 单元 格 。 

(38) 在 上 面 布局 单元 格 的 下 面 绘 制 一 个 宽 15px、 高 95px 的 布局 单元 格 ,再 在 紧 靠 
该 单元 格 的 右边 绘制 一 个 宽 120px、 高 95px 的 布局 单元 格 ,在 该 单元 格 中 插入 图 像 fj01- 
zjj. jpg, 将 该 图 像 设 为 : 宽 120px、 高 95px。 

(39) 重复 步骤 (38) 两 次 ,分 别 将 图 像 改 为 fi03-tyhj. jpg fi02-pu. jpg. 

(40) 在 3 个 图 像 所 在 的 布局 单元 格 的 正 下 面 绘制 3 个 宽 120px、 高 27px, 水 平 “ 居 中 
对 齐 ”, 垂 直 “ 居 中 ”的 布局 单元 格 .分 别 输入 文字 “张家界 ”“ 天 涯 海 角 ”、“ 昆 明 ”, 并 将 文字 
BOA: 字体 “宋体 ”, 大 小 12px, 颜 色 “ #000099”. 

(41) 重复 步骤 (38)、(39)、(40) ,将 图 像 分 别 改 为 fi06-sldw. jpg, fj05-sx. jpg. fj04- 
xm. jpg, 文 字 改 为 “森林 公园 *“ 三 峡 ”“ 四 川 ”。 

(42) 紧 接 上 面 的 布局 单元 格 , 在 它 下 方 绘制 一 个 水 平 “ 居 中 对 齐 ” ,垂直 * 居 中 ”的 布 
局 单元 格 , 插 入 图 像 banner. gif ,并 将 其 宽 设 为 410px。 

(43) 中 间 的 网 页 内 容 做 好 了 .将 光标 定位 到 右边 的 网 页 内 容 区 ,绘制 一 个 宽 184px、 
高 665px, 颜 色 为 “#99CC00” 的 布局 表格 。 

(44) 在 该 布局 表格 内 绘制 一 个 宽 184px、 高 255px. 颜色 为 “# FFFFFF” 的 布局 
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表格 。 

(45) 在 该 布局 表格 内 绘制 一 个 宽 184px、 高 49px, 背景 图 像 为 bl. jpg 的 布局 表格 ， 
再 在 该 布局 表格 内 绘制 一 个 宽 86px、 高 49px, 垂 直 “ 居 中 ”的 布局 单元 格 。 输 入 文字 “最 
新 资讯 ”, 并 将 文字 设 为 : 字体 “楷体 ”, 大 小 18px. BI" # CC0033", 

(46) 紧 接 上 面 的 布局 表格 ,在 它 下 方 绘制 一 个 宽 6px、 高 41px 水 平 “ 居 中 对 齐 ”, 垂 
直 * 居 中 ?的 布局 单元 格 ,插入 图 像 gw01. gif, 在 紧 靠 该 单元 格 的 右边 绘制 一 个 宽 172px、 
高 41px。 垂 直 * 居 中 ”的 布局 单元 格 , 输 入 文字 * 第 四 届 天 目 湖南 山竹 海 登山 节 盛 大 开 
幕 ”, 并 将 文字 设 为 : 字体 “宋体 ”, 大 小 12px。 

(47) 重复 步骤 (46) 四 次 ,分 别 将 文字 改 为 “市 旅游 局 发 布 旅游 质 监 情 况 "“ 交 通 渐 趋 
便利 杭州 -千岛 湖 -黄山 游 线 蓄 势 待 发 "“ 常 州 旅游 券 发 放 现场 拥挤 被 指 “ 暗 箱 操作 ””“ 早 
春 二 月 “踏青 游 ” 南方 三 城市 受 网 友 热 捧 ” 等 。 

(48) 紧 接 上 面 的 布局 单元 格 ,在 它 下 方 绘制 一 个 宽 184px, 高 20px, 水 平 “ 右 对 齐 ”， 
垂直 “居中 ”的 布局 单元 格 ,插入 图 像 morel. jpg. 

(49) 紧 接 上 面 的 布局 单元 格 ,在 它 下 方 依 次 绘制 五 个 宽 184px、 高 65px, 水 平 “ 居 中 
对 齐 ”, 垂 直 * 居 中 ”的 布局 单元 格 , 第 一 个 布局 单元 格 内 输入 文字 “友情 链接 ”, 字 体 “ 楷 
体 ”, 大 小 18px, 颜 色 “##CC0033”; 第 二 个 布局 单元 格 内 插入 图 像 yqlogo01.jpg ,并 将 图 像 
BEN: 宽 153px, 高 48px; 第 三 个 布局 单元 格 内 插入 图 像 yqlogo02. gif; 第 四 个 布局 单元 格 
内 插入 图 像 yqlogo03. gif; 第 五 布局 单元 格 内 插入 图 像 yqlogo04. gifs 并 将 图 像 设 为 : 宽 
153px, 高 48px。 

(50) 右边 的 网 页 内 容 做 好 了 ,将 光标 定位 网 页 的 版 权 信息 区 ,绘制 一 个 宽 783px\ 高 
34px. Bii (&, Jy * # CCCC33”, 水 平 “ 居 中 对 齐 ”, 垂 直 “ 居 中 ”的 布局 单元 格 ,输入 文字 
“Copyright @ 阳 光 旅 游 公司 ”。 

(51) 将 “插入 " 栏 中 的 “布局 ”选项 卡 改 为 “文本 ”选项 卡 , 单 击 "换行 符 ” 按 钮 吗 有 光标 
自动 定位 到 下 一 行 ,输入 文字 “E-mail: xxxxxxxxx 制 作者 ，xxxxxxxxxx”。 

GD 选中 这 两 行文 字 , 将 其 设 为 : 字体 “宋体 ”, 大 小 12px。 

(53) 选中 最 外 面 的 表格 ,切换 到 “标准 ”模式 ,打开 “属性 ”面板 ,将 对 齐 改 为 “居中 对 齐 ”。 

(54) fk F12 键 ,预览 。 


本 章 小 结 


本 章 介 绍 了 Dreamweaver 的 常用 功能 及 操作 .简单 介绍 了 Dreamweaver 的 各 种 功能 
的 使 用 。Dreamweaver 在 网 页 设计 软件 中 处 于 绝对 优势 的 地 位 ,为 设计 网 页 带 来 了 极 大 
的 方便 。 本 章 详 细 介 绍 了 创建 保存 图 文 混 排 的 网 页 及 如 何 输入 和 编排 文本 ,在 网 页 中 插 
入 特殊 符号 .图像 \ 日 期 水平线、 多 媒体 等 操作 。 文 本 页 面 是 最 基础 的 页 面 ,制作 自己 的 
网 页 一 定 要 规划 好 丰富 的 文本 内 容 , 构 建 页 面 文本 的 格式 ,恰当 地 插入 图 像 ,让 整个 网 页 
达到 赏心悦目 的 效果 。 本 章 还 讲述 了 如 何 插入 和 播放 多 媒体 对 象 和 Flash 动画 以 及 音频 
文件 ,制作 出 具有 动态 效果 的 网 页 ,使 得 网 页 更 加 丰富 多 彩 。 


第 3 章 ” Dreamweaver 基 本 网 页 编辑 


一 、 选 择 题 


i. 


7; 
画 的 图 像 格式 的 是 ( o. 


在 Dreamweaver 中 ,通过 ( ) 面 板 可 以 检查 .设置 和 修改 所 选 对 象 的 属性 。 
A. “RH” B. “AA” C.“ 资 源 ” D. "xt" 


.选择 ( ) 一 “工具 栏 ” 一 “文档 "命令 可 显示 或 隐藏 文档 "工具 栏 。 


A. “编辑” B. “修改 ” C. “命令 ” D. “查看” 


. 在 Dreamweaver 中 ,设置 超级 链接 的 属性 ,目标 设置 为 _top 时 ,表示 ( Js 


A. 新 开 一 个 浏览 窗口 来 打开 链接 B. 在 当前 框架 打开 链接 
C. 在 当前 框架 的 父 框架 中 打开 链接 D. 在 当前 浏览 器 的 最 外 层 打开 链接 


. 在 Dreamweaver 中 ,下 面 对 象 中 可 以 添加 热点 的 是 ( k; 


A. XF B. 图 像 C. 层 D. 动画 


. 关于 Dreamweaver 中 “编辑 样式 表 ” 对 话 框 的 设置 说 法 中 ,错误 的 是 ( do 


A. 可 以 设置 连接 独立 的 外 部 样式 表 文件 

B. 可 以 新 建 一 个 HTML 元 素 样式 

C. 可 以 同时 编辑 存在 样式 表 中 的 两 个 元 素 样式 
D. 可 以 删除 当前 样式 表 中 的 样式 元 素 


.对 在 Dreamweaver 中 插入 Flash 动画 (SWF) 的 描述 不 正确 的 是 ( Js 


A. 可 以 更 改动 画 的 播放 比例 

B. 不 可 以 在 Dreamweaver 中 直接 预览 Flash 的 内 容 

C. 可 以 设 定 为 循环 播放 

D. 可 以 设置 自动 播放 

具有 图 像 文件 小 .下 载 速 度 快 .下 载 时 隔行 显示 、 支 持 透明 色 、 多 个 图 像 能 组 成 动 


A. JPG B. BMP C. GIF D. PSD 


. 关于 创建 框架 网 页 的 描述 错误 的 是 ( J 


A. 在 “欢迎 屏幕 "中 选择 “从 范例 创建 ">"“ 框 架 集 ” 命 令 

B. 在 当前 网 页 中 单 击 “插入 ”面板 中 的 回 半 (框架 ) 按 包 

C. 在 主 菜 单 中 选择 “查看 ”>“ 可 视 化 助理 ”>“ 框 架 边框 ”命令 显示 当前 网 页 的 边 
框 ,然后 手动 设计 

D. 在 主 菜单 中 选择 “文件 ”>“ 新 建 ”>“ 基 本 页 ”命令 


. 在 Dreamweaver 中 , 关于 查找 和 替换 文字 说 法 错误 的 是 ( de 


A. 可 以 精确 地 查找 标记 中 的 内 容 

B. 可 以 在 一 个 文件 夹 下 蔡 换 文本 

C. 可 以 保存 和 调 人 替换 条 件 

D. 不 可 以 在 HTML 源 代 码 中 进行 查找 与 替换 
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10. 在 Dreamweaver 中 , 关于 排版 表格 属性 的 说 法 错误 的 是 ( de 
A. 可 以 设置 宽度 
B. 可 以 设置 高 度 
C. 可 以 设置 表格 的 背景 颜色 
D. 可 以 设置 单元 格 之 间 的 距离 但 是 不 能 设置 单元 格 内 部 的 内 容 和 单元 格 边框 








之 间 的 距离 
二 、 填空 题 
1. 在 Dreamweaver 中 使 用 的 第 三 方 插件 大 体 上 可 以 分 为 š 
三 种 类 型 。 
2. 创建 到 锚 点 的 链接 的 过 程 分 为 两 步 : 首先 ,然后 
3. 表单 的 提交 方法 有 两 种 : 和 
4. 制作 框架 网 站 , 除 保存 框架 中 包含 的 网 页 文件 ,还 需 保存 A 
5. 文本 的 对 齐 方式 通常 有 和 i 
6. 在 超级 链接 中 ,路径 通 常 有 三 种 表示 方法 : \ 文 档 相 对 路 径 和 站 点 根 目 
录 相 对 路 径 。 


7. 空 链接 是 一 个 未 指派 目标 的 链接 ,在 属性 "面板 "链接 "文本 框 中 输入 à 
即 可 。 


8. 使 用 技术 可 以 将 一 幅 图 像 划分 为 多 个 区 域 ,分 别 为 这 些 区 域 创建 不 同 的 
超级 链接 。 

9. 使 用 超级 链接 不 仅 可 以 跳 转 到 当前 网 页 中 的 指定 位 置 ,还 可 以 跳 转 到 其 
他 网 页 中 指定 的 位 置 。 

三 、 简 答题 


1. 在 Dreamweaver 中 ,通过 “页 面 属性 ”对 话 框 和 “属性 ”面板 都 可 以 设置 文本 的 字 
体 、 大 小 和 颜色 ,它们 有 何 差异 ? 

2. 简要 说 明 在 Dreamweaver 中 实现 图 文 混 排 的 方法 。 

3. 如果 在 Dreamweaver 中 要 在 网 页 中 能 够 播放 WMV 格式 的 视频 ,必须 通过 “ 属 
性 ”面板 做 好 哪 两 项 工作 ? 

4. 在 Dreamweaver 中 选择 表格 的 方法 有 哪些 ? 

5. 如 何在 Dreamweaver 中 进行 单元 格 的 合并 ? 

6. 在 Dreamweaver 中 如 何 选取 框架 和 框架 集 ? 


四 、 操 作 题 


和 图 像 ,并 设置 文本 和 图 像 的 格式 :并 为 页 面 添加 背景 音乐 ;通过 菜单 为 页 面 添加 视频 ;最 
后 再 为 页 面 加 入 文本 超 链接 (所 有 资源 文件 都 可 以 自己 定义 )。 


第 4 章 CSS 应 用 


4.1 CSS(Cascading Style Sheet) 概 念 





CSS(Cascading Style Sheet) 即 层 倒 样式 表 , 又 称 为 级 联 样式 , 它 是 一 种 用 来 表现 
HTML 文件 样式 的 计算 机 语言 ,是 网 页 设计 不 可 缺少 的 工具 之 一 。CSS 能 够 根据 不 同 使 
用 者 的 理解 能 力 , 简 化 或 者 优化 写法 ,针对 各 类 人 群 ,都 有 较 强 的 易 读 性 。CSS 文件 可 由 
记事 本 或 Dreamweaver 等 网 页 文件 编辑 器 打开 。 

HTML 过 多 地 利用 表格 来 排版 ,界面 效果 的 局 限 性 日 益 暴 露出 来 。 直 到 CSS 出 现 
后 局 面 才 有 所 改变 。CSS 是 网 页 设计 的 一 个 突破 , 它 解决 了 网 页 界面 排版 的 难题 。 可 以 
分 别 这 样 概括 HTML 和 CSS 的 作用 : HTML 的 Tag 主要 是 定义 网 页 的 内 容 (Content)， 
而 CSS 决定 这 些 网 页 内 容 如 何 显示 (Layout)。 


4.2 CSS 属性 设置 





4.2.1 CSS 常用 文本 属性 设置 


文本 属性 包括 文本 对 齐 属性 (text-align) ,其 值 可 取 left right 和 center, 
例 4-1 文本 属性 示例 。 


<html> 
<head> 
<title> 文 本 对 齐 属性 text- align< /title> 
<style type="text/css"> 
-pl{text- align:left} 
.p2 {text-align:right} 
-p3{text- align:center} 
</style> 
</head> 
<body> 
«p class- "pl"> 这 段 的 本 文 对 齐 属性 (text-align) 值 为 居 左 。< /p> 
<p class- "p2"> 这 段 的 本 文 对 齐 属性 (text- align) 值 为 居 右 。< /p> 
<p class- "p3"> 这 段 的 本 文 对 齐 属性 (text-align) 值 为 居中 。< /p> 
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</body> 
</html> 
程序 输出 结果 如 图 4-1 所 示 。 
国文 本 对 章 属性 text-aign [Bm 
这 段 的 本 文 对 齐 属性 (text-align) 值 为 居 左 。 





这 段 的 本 文 对 齐 属性 (text-align) 值 为 居 右 . 
这 段 的 本 文 对 齐 属性 (text-align) 值 为 居中 。 





图 4-1 文本 属性 设置 


文本 修饰 属性 的 取 值 为 none( 无 任何 修饰 ) .underline( 下 划 线 ) \line-through( 在 文字 
中 间 划 线 ) ,overline( 在 文字 上 边 划 线 ) .如 下 面 的 例子 所 示 。 
例 4-2 文本 修饰 属性 示例 。 


<html> 
<head> 
<title> 文 本 修饰 属性 text-decoration< /title> 
<style type="text/css"> 
-pl(text- decoration: none} 
.p2 (text- decoration: underline} 
-p3(text- decoration: line- through} 
.p4 (text- decoration:overline] 
</style> 
</head> 
<body> 
<p class= "pl"> 文 本 修饰 属性 (text- decoration) 的 默认 值 是 none。< /p> 
<p class- "p2"> 这 段 的 文本 修饰 属性 (text- decoration) 值 是 underline, </p> 
<p class="p3"> 这 段 的 文本 修饰 属性 (text- decoration) 值 是 line-through, </p> 


<p class- "p4"> 这 段 的 文本 修饰 属性 (text- decoration) 值 是 overline, </p> 
< /body> 
</html> 


运行 结果 如 图 4-2 所 示 。 





国文 本 修饰 属性 text-decoration 





文本 修饰 属性 (text-decoration) 的 默认 值 是 none。 
这 段 的 文本 修饰 属性 (text-decoration) 值 是 mderline。 





这 段 的 文本 修饰 属性 人 iod 








ZAMA EMATE (text-decoration)fBEoverline. 





图 4-2 文本 修饰 属性 


除 此 之 外 ,还 有 文本 缩 进 属性 (text-indent) 、 行 高 属性 (line-height)、 字 间距 属性 
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(letter-spacing) 等 ,这 几 个 属性 都 可 以 使 用 毫米 .厘米 、 像 素数 、 百 分 比 等 类 型 ,例如 : 


<style type="text/css"> 
«pl {line-height :1cm} 

«pl (letter- spacing: 3mm) 
.p3 (text- indent :50% } 
</style> 


4.2.2 CSS 常用 字体 属性 设置 


字体 属性 是 CSS 最 基本 的 属性 ,其 最 常用 的 属性 包括 font-family, font-style, font- 
weight, font-size 等 ,其 中 font-family 定义 使 用 哪 种 字体 ,font-style 定义 是 否 使 用 斜体 ， 
font-weight 定义 字体 的 粗细 ,font-size 定义 字体 的 大 小 。 

例 4-3 字体 属性 示例 。 


<html> 

<head> 

<title> 字 体 名 称 属性 font- family< /title> 

<STYLE> 

BODY{font- size:10pt} 

.31 (font- family:Arial} 

.32 {font- size:16pt} 

.33 (font- size:80% } 

.34 (font- size:larger} 

.35 (font- size:xx- large} 

.36 {font- style:italic} 

.37 (font- style:oblique} 

.38 {font:italic normal bold llpt Arial} 

.39 {font:normal small- caps normal l4pt Courier} 

</STYLE> 

</head> 

<body> 

<p>The font- family value of the text is the browser default font.< /p> 

«p class="s1">The fon- family value of the text is "Arial", </p> 

«p class="s2"> 这 段 文字 大 小 是 lept. </p> 

«p class="s3"> 这 段 文 字 大 小 是 10pt 的 80$, </p> 

«p class="s4"> 这 段 文字 的 大 小 比 10pt K. </p> 

«p class- "s5"> 这 段 文字 的 大 小 是 特大 号 (xx- large). </p> 

<p> 这 段 文字 的 风格 是 normal, 正 常 显示 。normal 是 字体 风格 属性 (font- style) 的 默认 值 。< /p 
> 

«p class="s6"> 这 段 文字 的 字体 风格 (font- style) 属 性 值 是 italic, f HEER. </p> 

«p class= "s7"> 这 段 文字 的 字体 风格 (font- style) 属 性 值 是 cblique, 斜 体 显示 。</p> 

«p class="s8"> 这 段 文字 的 字体 风格 (font- style) 属 性 值 是 italic, 字 体 变量 (font- variant) 属 
性 值 是 normal, 字 体 浓 淡 (font- weight) 属 性 值 是 bold, 字 体 大 小 (font- size) 属 性 值 是 11pt, 字 体 
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名 称 (font- family) 属 性 值 是 Arial, </p> 

«p class="s9"> 这 段 文字 的 字体 风格 (font- style) 属 性 值 是 normal, 字 体 变量 (font- variant) 属 
性 值 是 small- caps, 字 体 浓淡 (font- weight) 属 性 值 是 normal, 字 体 大 小 (font- size) 属 性 值 是 
14pt, 字 体 名 称 (font- family) 属 性 值 是 Courier. </p> 

< /body> 

</htm> 


运行 结果 如 图 4-3 所 示 。 





The font 





ily value of the text ia the browser default font 
The fon-famiy value of he text is “Arial. 
这 段 文字 大 小 是 16pt。 


BREET Area. 


这 段 文字 的 大 小 比 10pt 大 。 


这 段 文 字 的 大 小 是 特大 号 (xx-large) 。 


ERAFNM normal. ERMA. normal dF ERNE (tor 





style) BRUE. 


BREEN FER (te 





SRIF FER 


AREE SS EAR AR Tont-style) ME BA Bitalic, FAR (font-variany MEM Snormal, Sr AACR font-weight) Mt a bold] 
FMA Niontsize) MAAR pt. FAL MK(Tont-family) [TE GE Arial. 


这 段 文字 的 字体 风格 (FoNT-sTYLE) 属 性 值 是 NORMAL， 字 体 变量 (FoNT-VARIANT) 属 性 值 是 sMaAIL-CahFS， 
字体 浓淡 (EET gerer ME nonni, 字体 大 小 (FONT-SIZE) 属 性 值 是 14PT， 字 体 名 称 (FONT- 








图 4-3 字体 属性 示例 


4.2.3 CSS 常用 颜色 .背景 等 属性 设置 


color 定义 前 景 颜色 .background-color 定义 背景 颜色 ,background-image 定义 背景 
图 片 , background-repeat 定义 背景 图 片 重复 方式 , background-attacement 定义 滚动 ， 
background-position 定义 背景 图 片 的 初始 位 置 。 下 面 结合 前 面 讲解 的 字体 属性 展示 相应 
的 设置 方法 。 

例 4-4 字体 及 颜色 属性 示例 。 


<head> 
<title> 属 性 设置 示例 < /title> 
</head> 
<body> 
<div align= "left"> 字 体 属 性 设置 :</div> 
<span style="font- family: 幼 圆 ;font- style: italic; font- weight:bold; font- size: 
10pt;"> 幼 圆 斜体、 黑体 、10pt< /span> <br> 
<span style="font- family: 隶 书 ;font- size:16pt;"> 素 书 、 黑 体 、16pt< /span> «br» 
<div align- "left"> 字 体 属性 设置 :< /div> 
<span style= "color:red;background- color:yellow;"> 前 景 红 色 、 背 景 黄色 < /span><br> 
<span style- "background- image:url ('image.gif');background- repeat:no- repeat;"> 
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&nbsp; &nbsp; &nbsp; &nbsp; 图 片 背 景 .不 重复 < /span> <br> 
</body> 
« /html» 


运行 结果 如 图 4-4 所 示 。 


图 片 背景 、 不 重复 
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关于 CSS 样式 表 的 属性 详 见 附录 A。 
4.3 CSS 用 法 


4.3.1 CSS 选择 器 

1. 标记 选择 器 

语法 定义 实例 : 

hl {color: red; font- size: 25px;} 

hl 代表 的 是 HTML 语言 中 的 内 部 标记 语言 如 p, body, hr FX fiii], color, font- 
size 都 为 其 属性 ,“: ”后 面 的 为 其 对 应 的 值 。 

2. 类 别 选择 器 

这 是 前 面 用 过 的 一 种 格式 ,语法 定义 实例 : 

.myclass123 (color: red; font-size: 25px;} 

VAS. "为 开头 的 格式 ,而 myclass123 是 自 定义 的 名 字 , 不 是 HTML 语言 中 的 内 部 标 
记 语 言 。 它 在 DIV 中 的 调用 格式 二 div class=myclass123>...</div>. 

3. ID 选择 器 

语法 定义 实例 : 

#myid789 {color: red; font- size: 25px;} 

以 *# ”为 开头 的 格式 ,而 myid789 是 自 定义 的 名 字 , 不 是 HTML 语言 中 的 内 部 标记 
语言 。 它 在 DIV 中 的 调用 格式 二 div id=myclass123>...</div>. 
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4.3.2 CSS 样式 应 用 


根据 CSS 写 的 位 置 的 不 同 , 可 以 分 为 内 内 样 式 表 、 内 部 样式 表 和 外 部 样式 表 。 

1. WARES ZH (Inline Style Sheet) 

Inline Style 5 7E Tag 里 面 的 。 内 徐 样 式 只 对 所 在 的 Tag A. WAU TF KEE 
式 表 : 

<P style="font- size:20pt; color:red"> 这 个 style 定义 里 面 的 文字 是 20pt 

字体 ,字体 颜色 是 红色 。< /p> 


在 记事 本 中 编辑 HTML. 8 FELICIA CREER 
例 4-5 ”内 嵌 样 式 使 用 。 


<html> 

<head><title> 内 嵌 式 样式 (Inline Style)« /title»« /head> 

<body> 

«P style="font- size:20pt; color:red"» Alf FFX (Inline Style) 定 义 段 落 里 面 的 文字 是 20pt 
字 , 颜 色 是 红色 。< /p> 

<P> 这 段 文字 没有 使 用 内 嵌 样 式 。< /p> 

< /body> 

</html> 


TEWI YA A E A A E Pd C. B A UL RI T AREER MIROR A 4-5 所 示 。 


2 oth ot (Inline Style) - Microsoft Internet Explorer 
xe) 编辑 区 ) BEM KRA IAW Miho a 














* 
AMX (Inline Style) 定义 段落 里 面 的 文字 是 20pt， 颜 色 是 红色 。 j 
* 


XX BOCERUR RAAT. 
EZ 


|i p 我 的 电脑 
图 4-5 ”内 榜样 式 表 

2. 内 部 样式 表 (Internal Style Sheet) 

内 部 样式 表 是 写 在 HTML 的 二 head 二 … 坪 /head 二 里 面 的 。 内 部 样式 表 只 对 所 在 
的 网 页 有 效 。 

内 部 样式 表 实 例如 例 4-6 所 示 。 

Bl 4-6 内 部 样式 表 使 用 。 


<HTML> 
<HEAD> 
<STYLE type="text/css"> 
H4.mylayout (border-width:1; border:solid; text-align:center; color:red} 


</STYLE> 
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< /HEAD> 
<BODY> 
«H4 class= "mylayout"> 这 个 标题 使 用 了 Style, </H4> 
<H4> 这 个 标题 没有 使 用 Style。< /H4> 
< /BODY» 
< /HIML» 


效果 如 图 4-6 所 示 。 


了 无 标题 文档 - 
文件 E 


这 个 标题 使 用 了 Style。 





4-6 内 部 样式 表 


3. 外 部 样式 表 (External Style Sheet) 

如 果 很 多 网 页 需要 用 到 同样 的 样式 (Styles) , 则 可 以 使 用 外 部 样式 。 

将 样式 (Styles) 写 在 一 个 以 . css 为 后 级 的 CSS 文件 里 ,然后 在 每 个 需要 用 到 这 些 样 
式 (Styles) 的 网 页 里 引用 这 个 CSS 文件 。 

例 4-7 外 部 样式 表 使 用 。 

可 以 用 文本 编辑 器 (NotePad) 建 立 一 个 叫 home 的 文件 ,文件 后 组 不 要 用 . txt, 改 成 
. Css。 文件 内 容 如 下 : 


H3.mylayout {border- width: 1; border: solid; text-align: center;color:red} 
然后 建立 一 个 网 页 (假设 此 网 页 与 home. ess 在 同一 个 文件 夹 下 ) ,代码 如 下 : 


<HTML> 
<HEAD> 
< link href- "home.css" rel="stylesheet" type="text/css"> 
</HEAD> 
<BODY> 
«H3 class= "mylayout"> 这 个 标题 使 用 了 Style. </H3> 
<H3> 这 个 标题 没有 使 用 Style。< /H3> 
</BODY> 
</HTML> 


效果 如 图 4-7 所 示 。 

例 4-8 定义 外 部 样式 文件 修饰 如 图 4-8 所 示 的 用 户 登录 页 面 ,要 求 创建 外 部 样式 表 
并 在 页 面 中 引入 。 

(D CSS X ff Cess. css). 


A { font- size:l2px; 
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xe) Ss x ERU TAD 





这 个 标题 没有 使 用 了 Style， 使 用 了 关键 词 link。 
GE I PESTI 








图 4-7 外 部 样式 表 
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图 4-8 用 户 登录 页 面 


color:# 0000FF; 

text- decoration:none 

} 
A:hover ( text-decoration:underline; color:# FF0000} 
.loginMain { 

border:lpx solid #57A0ED; 

padding- bottom:10px; 

background: # EEFSEF; 

margin-bottom: 25px 


) 

-inputMain ( 
border:lpx solid #718DA6; 
height:l7px; 
padding:2px 0 0 4px; 
width:l20px 

} 


-loginHead { 
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padding- left:50px; 
background- image:url(images/login head.gif); 
padding- top:l4px; 
height:27px; 
line-height:4px; 
font-size:l3px; 
color:#fff; 
font-weight :bold 
) 
-picButton( background- image:url(images/login submit.gif);( 
border:0px; 
margin: 20px; 
padding: 0px; 
height: 30px; 
width: 137px; 
font-size: 14px; 
} 
.lefttd {text- align:right; padding- right:lOpx; font- size:12px; font- family:" 新 宋体 "} 


(2) 页 面 设计 及 CSS 文件 的 引入 (CSS. htm) 。 


<HIML> 
<HEAD> 
<META http- equiv= "Content- Type" content= "text/html; charset=gb2312"> 
<TITLE> 样 式 表 实 训 < /TITLE> 
<LINK rel="stylesheet" type="text/css" href- "css.css"> 
</HEAD> 
<BODY> 
< FORM» 
< TABLE» 
«TR» 
<TD colspan= "2"> < IMG src= "images/top.jpg"» </TD> 
</TR> 
<TR 
<TD width= "498"> 
<TABLE width="381" cellpadding="0" cellspacing-"0" class- "loginMain"» 
<TR> 
<TD colspan- "2" height- "27" class- "loginHead"> 拍 拍 用 户 登 录 < /TD> 
</TR> 
<TR> 
<TD width- "120" class- "lefttd"» Qo 号码 < /TD> 
<TD width="265">< INPUT type="text" class="inputMain"> <A href="#"> BWE Q 
号 码 &gtr&gt;« /A» « /TD> </TR> 
< TR» < TD class=" lefttd" > QQ # Bj </TD> < TD» < INPUT type="text” class= 


89 


90 


Web 项 目 开发 实践 教程 


"inputMain"» <A href- "$ "» S10 BW &gt;&gt;« /A» « /TD» « /TR> 
<TR><TD colspan-"2" align="center"> < INPUT type="submit" value-""  class-" 
picButton">< /TD» « /TR> 
</TABLE> 

</TD> 

<TD width= "451"» < IMG src- "images/right.jpg"»« /TD> 
</TR> 
<TR><TD colspan="2">< IMG src="images/bottom.jpg"> « /TD» « /TR» 
</TABLE> 
< /FORM> 
</BODY> 
</HTML> 


4.4 DIV+CSs 使 用 方法 





DIV 是 CSS 中 的 定位 技术 ,全称 division, 即 为 划分 ,可 以 包含 在 HTML 中 。DIV 十 
CSS 是 网 站 标准 (或 称 “Web 标准 ”) 中 常用 的 术语 之 一 。 可 以 用 DIV 盒 模型 结构 把 网 页 
各 部 分 内 容 划 分 到 不 同 的 区 块 ,然后 用 CSS 定义 盒 模型 的 位 置 . 大 小 ,边框 .内 外 边 距 HE 
列 方式 等 。 

简单 地 说 ,DIV 用 于 搭建 网 站 结构 (框架 )、CSS 用 于 创建 网 站 表现 (样式 /美化 ) ,使 
用 CSS 将 表现 与 内 容 分 离 , 便 于 网 站 维护 ,简化 HTML 页 面 代 码 , 可 以 获得 一 个 较 优秀 
的 网 站 结构 ,便于 日 后 维护 ,协同 工作 和 搜索 抓 取 等 。 

例 4-9 DIV 十 CSS 使 用 方法 示例 。 


<html> 
<head> 
<title>DIV+CSS 案例 < /title> 
<link href="mycss.css" type="text/css" rel="stylesheet"/> 
</head> 
<body> 
<div class="content"> 
<div class="left"> 
我 在 左边 <br /> 我 在 左边 <br /> 我 在 左边 <br /> 
我 在 左边 <br /> 我 在 左边 <br /> 我 在 左边 <br /> 
我 在 左边 <br /> 我 在 左边 <br /> 我 在 左边 <br /> 
</div> 
<div class="mid"> 
我 在 中 间 <br /> 我 在 中 间 <br /> 我 在 中 间 <br /> 
我 在 中 间 <br /> 我 在 中 间 <br /> 我 在 中 间 <br /> 
我 在 中 间 <br /> 我 在 中 间 <br /> 我 在 中 间 <br /> 
我 在 中 间 <br /> 我 在 中 间 <br /> 我 在 中 间 <br /> 


</div> 

<div class="right"> 
我 在 右边 <br /> 我 在 右边 <br /> 我 在 右边 <br /> 
我 在 右边 <br /> 我 在 右边 <br /> 我 在 右边 <br /> 
我 在 右边 <br /> 我 在 右边 <br /> 我 在 右边 <br /> 

</div> 

</div> 

< /body> 

</html> 
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CSS 文件 mycss. css 内 容 如 下 (mycss. css 与 mydiv. html 应 在 同一 文件 夹 下 ): 


„content 
{ 
width:400px; 
height:300px; 
magin:0 auto; 
} 
„left 
{ 
float:left; 
width:98px; 
height:200px; 
border:solid 1px; 


) 

-mid( 
float:left; 
width:l98px; 
height:300px; 
border:solid lpx; 
text-align:center; 


} 

.right( 
float:left; 
width:98px; 
height:100px; 
border:solid 1px; 
text-align:right; 

} 


效果 如 图 4-9 所 示 。 
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4-9 DIV+CSS 运行 结果 


4.5 Æ Dreamweaver 中 创建 CSS 





f FLEX AR TARE AY 75 3X V nT ELTE Dreamweaver 中 创建 CSS, 

例 4-10 利用 Dreamweaver i] ^|) 4 FEL CSS, 并 将 其 附加 在 一 个 使 用 form 的 
网 页 上 。 要 求 创建 的 一 个 超 链接 外 部 样式 层 倒 表 , 为 Dreamweaver 文件 夹 中 所 有 以 index FF 
头 的 网 页 文件 附加 超 链接 样式 表 ; 创 建 一 个 table 外 部 层 秋 样式 表 . 为 test-table 文件 夹 中 使 
用 table 的 页 面 附 加 样式 表 ; 创 建 一 个 用 户 注册 表单 页 面 ,页 面 中 使 用 多 种 表单 样式 。 

具体 解 题 步骤 如 下 : 

1. 创建 超 链接 CSS 


CD 单 击 菜单 “文件 ”>“ 新 建 " 命 令 , 启 动 “新 建文 档 ” 对 话 框 ,如 图 4-10 所 示 。 


EGR 
He 


j= 


"i 5 
n 





: 
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图 4-10 新 建 CSS 
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(2) 单 击 * 创 建 ?按钮 ,进入 CSS 编辑 页 面 , 在 代码 区 域 输入 代码 : 


@charset"utf- 8"; 
/ * CSSDocument * / 
af ”font- family: 新 宋体 , 幼 圆 ,微软 雅 黑 , 素 书 , 华 文中 宋 ,华文 行 楷 , 华 文 新 魏 , 华 文 隶书 ,华文 
TE; 
color:# 0000FF; font- weight :bold; } 
a:link( 
text- decoration:none; 
} 
a:visited{ 
text- decoration:none; 
color: # 990000; 
) 
a:hover( 
text- decoration:none; 
) 
a:active( 
text- decoration:none; 
color: # FF0000; 
) 


(3) 保存 文件 到 站 点 根 目录 下 的 Dreamweaver 文件 夹 的 CSS 文件 夹 中 ,文件 命名 为 
texthyperlink. css。 

2. 为 页 面 文件 附加 样式 表 

COD. 打开 Dreamweaver 文件 夹 及 其 子 文件 夹 下 的 所 有 以 index 开头 的 页 面 文 件 。 

(2) 选中 其 中 一 个 页 面 , 单 击 菜单 “格式 ”>“CSS 样式 ”->“ 附 加 样式 表 ” 命 令 , 为 使 用 文 
本 超 链接 的 页 面 附加 超 链 接 样式 表 texthyperlink. css。 在 页 面 “ 代 码 视图 ”中 二 /head 二 之 前 
会 自动 添加 代码 : 


<link href="../CSS/texthyperlink.css" rel="stylesheet" type- "text/css"/» 


(3) 单 击 菜单 “格式 ”>“CSS 样式 ”>“ 附 加 样式 表 ” 命 令 , 为 使 用 文本 超 链接 的 页 面 
附加 超 链接 样式 表 textl. css。 在 页 面 “代码 视图 ”中 二 /head 二 之 前 会 自动 添加 代码 : 


«link href=". ./CSS/text1.css" rel="stylesheet" type= "text/css"/> 。 


(4) 重复 (2) 和 (3) 的 步骤 ,可 为 其 他 index 开头 的 
页 面 附加 样式 表 。 

3. 创建 针对 table 的 CSS 文件 

(1) 打开 test-table 文件 夹 中 的 table-data. html 文 
件 。 单 击 菜单 “窗口 ">“CSS 样式 ”命令 ,启动 CSS 面 
板 , 如 图 4-11 所 示 。 

(2) 右 击 图 4-11 中 的 二 样式 二 行 , 单 击 快 捷 莱 单 中 
的 “新 建 " 命 令 , 启 动 “新建 CSS 规则 ”对 话 框 ,具体 设置 

















图 4-11 CSS 面 板 
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如 图 4-12 所 示 。 


新 建 CSS 规则 


选择 器 类 型 - 
为 CSS 规则 选择 上 下 文选 择 器 类 型 








标签 ( 重新 定义 ITIL TR) 





ERRES: 
选择 或 输入 选择 器 名 称 、 
table 


此 选择 器 名 称 格 规则 应 用 于 
<table> 元 素 。 

















图 4-12 ”新建 CSS 样式 表 
(3) 单 击 * 确 定 ?按钮 ,将 样式 表 保存 到 站 点 根 目 录 ”. .. /Dreamweaver/CSS” 目 录 下 ， 
命名 为 table. css, 如 图 4-13 所 示 。 


保存 样式 表 文 件 为 


SEQ: [已 css 


mum E 


[T terthyperlink ess 














ZZW: [ule cus ss] 
RERED: [PRX (css) 司 Cs) 








URL: JCSS/ table. css. ] 
xm — v 
VOR SEL EMU Se T 





图 4-13 保存 CSS 样式 表 


(4) 定义 table 的 类 型 .区 块 和 边框 ,其 他 属性 暂 不 改变 。 单 击 “ 确 定 ” 按 钮 ,如 图 4-14 
所 示 。 定 义 完成 后 在 代码 视图 中 显示 的 代码 为 


@ charset"utf- 8"; 
table{ 
font- family: "##{*_GB2312"; 


font-size:lSpx; 
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font- weight :bold; 
text-align:center; 
vertical- align:middle; 
border: lpxsolid# FF3300; 
color: # 0000FF; 


table ff) CSS 规则 定义 























图 4-14 CSS 规则 定义 


4. A test-table 文件 夹 中 使 用 table 的 页 面 附加 样式 表 

(1) 打开 test-table 文件 夹 中 的 table-data. html 和 table-set. html 文件 。 

(2) 单 击 菜单 “格式 ”>“CSS 样式 >“ 附加 样式 表 ” 命 令 , 为 使 用 table 的 两 个 页 面 分 别 
附加 超 链接 样式 表 table. css。 在 页 面 代码 视图 中 过 /head 一 之 前 会 自动 添加 代码 : 


<link href="../CSS/table.css" rel="stylesheet" type- "text/css"/> 


5. 创建 注册 个 人 信息 的 表单 页 面 

(1) 在 test-formCss 文件 夹 中 复制 1 个 model-index. html 文件 ,文件 名 改 为 form- 
reg. html, 将 页 面 中 显示 的 “标题 "文本 改 为 “个 人 信息 注册 ”。 

(2) 单 击 菜单 “插入 ”一 “表单 >“ 表单 ”命令 ,插入 表单 记录 。 

(3) 单 击 菜单 “插入 ”一 “表格 "命令 ,插入 一 个 10 行 3 列 的 表格 ,具体 设置 如 图 4-15 
所 示 。 设 置 表格 的 外 观 , 合 并 部 分 单元 格 , 在 表格 中 输入 文本 ,结果 如 图 4-16 所 示 。 

OD 单 击 “ 姓 名 ”文本 右 侧 的 单元 格 , 单 击 菜单 “插入 ”>“ 表 单 ”>“ 文 本 域 " 命 令 , 打 开 
一 个 对 话 框 ,如 图 4-17 所 示 。 单 击 “ 确 定 ” 按 钮 , 回 到 设计 视图 , 单 击 文本 框 ,设置 其 “类 
型 "属性 为 “单行 ”, 字 符 宽度 为 25, 如 图 4-18 所 示 。 

O 单 击 设计 视图 中 “性 别 ” 文 本 右 侧 的 单元 格 , 两 次 单 击 菜单 “插入 ”一 “表单 ”>“ 单 
选 按钮 "命令 ,插入 性 别 单 选 按 钮 组 。 设 置 完成 后 代码 为 : 





<input name="sex" type="radio" id- "radio" value=" 男 "checked= "checked"/> 和 
<input name="sex" type="radio" id- "radio2" value=" 女 "/> 
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个 人 信息 注册 





图 4-16 ”注册 信息 文本 输入 


输入 标签 辅助 功能 属性 
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图 4-17 设置 姓名 输入 文本 表单 
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图 4-18 姓名 文本 框 设置 

(6) 单 击 设计 视图 中 “登录 密码 "文本 右 侧 的 单元 格 , 单 击 菜单 “插入 ”一 “表单 ”>“ 文 
本 域 "命令 ,插入 文本 框 ,在 “属性 ”面板 中 设置 文本 域 类 型 为 “密码 ”。 设 置 完成 后 代码 为 ; 

«input name- "pud" type="text" id= "pud" size="25"/> 
在 “重复 密码 ” 左 侧 单元 格 插入 文本 框 ,设置 完成 后 代码 为 : 

«input name= "pud" type="text" id- "pud" size="25"/> 

(7) 单 击 设计 视图 中 “个 人 爱好 ”文本 右 侧 的 单元 格 , 单 击 菜单 “插入 ”一 “表单 ”>“ 复 
选 框 "命令 ,插入 复 选 框 。 第 一 项 复 选 框 设置 完成 后 代码 为 : 

< input name= "hobby" type="checkbox" id= "hobby" checked= "checked"/> 

其 余 三 项 设置 完成 后 代码 为 : 


«label» 
<input type="checkbox" name- "hobby2" id= "hobby2"/» i JR « /label> 
«label» 
«input type- "checkbox" name- "hobby3" id- "hobby3"/> 旅 游 < /1abel» 
«label» 
«input type="checkbox" name- "hobby4" id- "hobby4"/» i < /label> 


(8) 单 击 设计 视图 中 “所 在 城市 ”文本 右 侧 的 单元 格 , 单 击 菜单 “插入 ”一 “表单 ”>“ 选 
择 (列表 /菜单 ) "命令 ,插入 列表 框 , 属 性 设置 如 图 4-19 所 示 。 


输入 标签 辅助 功能 属性 









































图 4-19 设置 选择 列表 
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(9) 添加 选择 项 。 选 中 选择 列表 , 单 击 属性 面板 上 的 “列表 值 ”按钮 ,设置 列表 中 的 城 
市 ,如 图 4-20 所 示 。 


Canisi ut aliquid ex ea commodi 4 











图 4-20 设置 列表 中 的 城市 


设置 完成 后 的 代码 为 : 

<select name- "city"id- "city"» 

«option» $f Mi < /option» 

<option selected- "selected"> 烟 台 < /option» 

« option» fi « /option> 

«option» iS « /option» 

«option» Bi iif « /option> 

</select> 

(10). 单 击 设计 视图 中 “联系 方式 ”文本 左 侧 的 单元 格 , 单 击 菜单 “插入 ”一 “表单 ”一 
“文本 域 " 命 令 , 插 入 文本 框 ,设置 完成 后 的 代码 为 : 

<input name- "phone" type="text" id- "phone" size- "40"/» 

单 击 设计 视图 中 “个 人 简介 ”文本 左 侧 的 单元 格 , 单 击 菜单 “插入 ”一 “表单 ”>“ 文 本 区 
域 "命令 ,插入 文本 区 域 框 ,设置 完成 后 的 代码 为 : 

<textarea name= "Biography" id= "Biography" cols- "72" rows= "6"> < /textarea> 

AD 单 击 设计 视图 中 表格 最 后 一 行 中 间 单 元 格 ,两 次 单 击 菜单 “插入 ”一 “表单 ”~ 
“按钮 ”命令 ,插入 表单 按钮 ,设置 完成 后 的 代码 为 : 

<input type- "reset" name- "reset" id- "reset" value=" 重 置 "/> 

«input type="submit" name- "submit" id- "submit" value- "提交 "/> 

(12) 最 终 完 成 的 表单 如 图 4-21 所 示 。 

6. 修改 index-tablel. html 页 面 ,并 设置 超 链接 和 附加 样式 表 

(1) 打开 test-formCss 文件 夹 中 的 index-formCss. html 文件 ,并 将 页 面 中 显示 的 “ 标 
题 " 文 本 改 为 “使 用 表单 和 Css". 

(2) 在 左 侧 栏 中 设置 一 个 名 为 “表单 页 面 ”的 文本 超 链接 ,链接 到 form-reg. html 
页 面 。 
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个 人 信息 注册 











4-21 完成 后 的 表单 


G) 单 击 菜单 “文本 ”>“CSS 样式 ”>“ 附 加 样式 表 ” 命 令 , 为 index-formCss. html 页 
面 附 加 超 链接 样式 表 texthyperlink. css。 


4.6 案例 实践 


4.6.1 案例 需求 说 明 


对 “名 家 作品 平台 网 站 ”文件 夹 中 的 文件 进行 CSS 样式 表 的 设置 ,要 求 : 

CD 整个 文件 夹 下 的 文件 超 链 接 格 式 “ 字 体 : 宋体 ,大 小 : 10pt, 颜 色 : 黄色 ,无 下 划 
线 ”"。 访 问 后 的 超 链接 的 格式 “字体 : 宋体 ,大 小 : 10pt, 颜 色 : 黑色 ,无 下 面 线 ”"。 和 鼠标 光 
标 移 到 超 链接 的 文字 上 显示 十 字 型 光标 。 

(2) 整个 文件 夹 下 文件 正文 格式 “字体 : 宋体, 大小: 10pt, 颜 色 : 黑色 ,文字 行 间距 为 
20px”, 表 格 有 “ 左 、 右 的 边框 线 , 线 型 : 实 线 , 大 小 : 2px, 颜 色 : #ccccce, 表 格 离 网 页 的 边 
距 为 0, 鼠 标 显 示 mouse7. ani 的 鼠标 样式 ”。 页 脚 区 域 的 文字 格式 “字体 : 宋体 ,大 小 : 
9pt, 颜 色 : AE”, 

(3) index. html 中 “热爱 生命 ”四 个 字 的 格式 “字体 : 楷体 ,大 小 : 14pt, 颜 色 : 黄色 ”。 
其 下 面 的 文字 格式 “字体 : 宋体 ,大 小 : 10pt, 颜 色 : 白色 ”。Flash 下 面 的 文字 格式 “字体 : 
宋体 ,大 小 : 14px, 颜 色 : 井 FF6600”, 效 果 图 如 图 4-22 所 示 。 

(4) jianjie. html 中 所 获奖 项 的 项 目 列表 符号 用 图 像 显 示 , 效 果 如 图 4-23 所 示 。 

(5) wenxue. html 中 图 像 边 框 格式 “样式 : AR. RE. 中 ,颜色 : 红色 ”。 

(6) huihua. html 中 “小 能 ”图 像 格式 “ 滤 镜 : 去 色 (Gray)”。 

(7) donghua. html 中 设置 该 页 面 的 背景 图 像 不 跟随 内 容 滚动 ,其 中 背景 图 像 为 
back. gif. 

(8) xinde, html 中 “热爱 生命 ”四 个 字 的 格式 “字体 : 楷体 ,大 小 : 14pt, 颜 色 : 黄色 ”。 
其 下 面 的 文字 格式 “字体 : 宋体 ,大 小 : 10pt, 颜 色 : 白色 ”。 中 间 表 格格 式 “样式 : 实 线 , 宽 
度 2px, 颜 色 : 红色 ”。 
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图 4-23 jianjie. html 效果 图 


4.6.2 技能 训练 要 点 


本 技能 训练 主要 练习 CSS 样式 表 的 创建 及 运用 .主要 训练 要 点 如 下 : 
COD 掌握 CSS 样式 表 功 能 ; 

(2) 掌握 内 部 样式 表 的 创建 ,并 会 在 网 页 中 运用 样式 表 ; 

(3) 掌握 外 部 样式 表 文 件 的 创建 ,并 会 将 该 文件 运用 到 整个 站 点 文件 ; 
(4) 掌握 样式 表 的 管理 ,会 编辑 删除 、 重 命名 样式 表 。 
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4.6.3 案例 实现 


该 案例 主要 涉及 整个 站 点 的 一 个 外 部 样式 表 文 件 的 创建 、 编 辑 及 应 用 ,每 个 网 页 内 部 
样式 表 的 创建 、 编 辑 及 应 用 。 实 现 步骤 如 下 : 

(1) 打开 index. html 页 面 ,选择 “文本 ”一 “CSS 样式 ”一 新建? 菜单 命令 , 弹出 
图 4-24 所 示 的 “新 建 CSS 规则 ?对话 框 ,将 * 选 择 器 类 型 ?选择 为 “高 级 (ID、 伪 类 选择 器 
等 )”, 在 “选择 器 "下拉 列表 框 中 选择 “a: link”,“ 定 义 在 ”选择 “(新 建 样 式 表 文 件 )”, 单 击 
“确定 ”按钮 ,弹出 “保存 样式 表 文 件 为 ”对话 框 ,在 文件 名 中 输入 文件 名 new, 单 击 “ 保 存 ” 
按钮 ,弹出 “a: link 的 CSS 规则 定义 (在 new. css 中 )” 对 话 框 ,在 “分 类 ”中 选择 “类 型 ”， 
设置 为 "字体 : 宋体 ,大 小 : 10pt, 颜 色 : 黄色 ,修饰 ; 无 ”, 单 击 “ 确 定 ” 按 钮 。 

注意 : 外 部 的 CSS 样式 表 文 件 后 缓 名 为 . css。 


新 建 CSS 规则 




















4-24 “新 建 CSS 样式 表 ”“ 高 级 ”选项 对 话 框 


(2) 重复 步骤 (1) ,此 时 将 “选择 器 ” 改 为 “a: visited”, “定义 在 ”选择 “new. css”, 单 击 
“确定 ”按钮 ,弹出 “a: visited 的 CSS 规则 定义 (在 new. ess 中 )” 对 话 框 ,在 “分 类 ”中 选择 
“类 型 ”, 设 置 为 “字体 : 宋体 ,大 小 : 10pt, 颜 色 : 黑色 ,修饰 : 无 ”, 单 击 “ 确 定 ” 按 钮 。 

(3) 重复 步骤 (2) ,此 时 将 “选择 器 ” 改 为 “a: hover”. “定义 在 ”选择 “new. css”, 单 击 
“确定 ”按钮 ,弹出 “a: hover 的 CSS 规则 定义 (在 new. css 中 )” 对 话 框 ,在 “分 类 ”中 选择 
“扩展 ”, 设 置 为 “光标 : crosshair”, 单 击 “ 确 定 ” 按 钮 。 

(4) 打开 浮动 面板 组 中 的 CSS. 面板 ,选中 new. css, 布 击 ,选择 “新 建 " 命 令 弹 出 
图 4-25 所 示 的 “新 建 CSS 规则 ”对 话 框 , 将 “选择 器 类 型 "选择 为 “标签 (重新 定义 特定 标签 
的 外 观 )”, 在 “标签 "下 拉 列 表 框 中 选择 body,“ 定 义 在 ”选择 “new. css”, 单 击 “ 确 定 ” 按 钮 ， 
弹出 “body 的 CSS 规则 定义 (在 new. css 中 )” 对 话 框 ,在 “分 类 ”中 选择 “类 型 ”, 设 置 为 
“字体 : 宋体 ,大 小 : 10pt, 颜 色 : 黑色 , 行 高 : 20px”, 接 着 在 “分 类 ”中 选择 “扩展 ”, 设 置 为 
“光标 : crosshair”, 此 时 因为 默认 的 鼠标 样式 没有 mouse7. ani, 所 以 可 以 任意 选择 一 个 鼠 


选择 器 类 型 : 〇 类 (应 用 于 任何 标签) O 























图 4-25 “新 建 CSS 样式 表 ”“ 标 记 ” 选 项 对 话 框 
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标 样式 , 单 击 “ 确 定 ” 按 钮 ,然后 回 到 new. css 文件 ,将 crosshair 改 为 "url(mouse7. ani)”. 

(5) 打开 浮动 面板 组 中 的 CSS 面板 ,选中 new. css, 右 击 , 选 择 “ 新 建 " 命 令 , 弹 出 “新 
建 CSS 规则 ”对 话 框 ,将 选择 器 类 型 选择 为 “类 ”,“ 名 称 ” 为 “. t”, “定义 在 ”选择 new. css, 
弹出 *.t 的 CSS 规 则 定义 (在 new. css 中 )” 对 话 框 ,在 “分 类 ”中 选择 “ 方 框 ”, 设 置 为 
“边界 : 上 、 下 、 左 、 右 都 为 0px”, 接 着 选择 边框”, 设置 为 样式; 上 、 下 、 左 、 右 都 为 
实 线 ,宽度 : 上 Opx, F 0px、 左 2px\ 右 2px' 颜 色 : 上 、 下 、 左 、 布 都 为 # cccccc”, 单 击 
“确定 ”按钮 。 

(6) 重复 步骤 (5), 此 时 将 选择 器 类 型 选择 为 “类 ”,“ 名 称 ” 为 “. yj” o “定义 在 ”选择 
new. css 中 ,弹出 “. yj 的 CSS 规则 定义 (在 new. ess 中 )” 对 话 框 ,在 “分 类 ”中 选择 “类 
型 ,设置 为 “字体 : 宋体 ,大 小 : 9pt, 颜 色 : 白色 ”, 单 击 “ 确 定 ” 按 钮 。 

注意 : 以 上 的 CSS 样式 都 是 在 外 部 的 new. css 文件 中 编辑 的 。 

(7) 保存 new. css 文件 。 

(8) 回 到 index. html 页 面 ,选择 “文本 ”一 “CSS 样式 ”>“ 新 建 "菜单 命令 ,在 弹出 的 
“新 建 CSS 规则 ”对 话 框 中 ,将 选择 器 类 型 选择 为 “类 ”,“ 名 称 ” 为 “. style1”, “定义 在 ”选择 
“ 仅 对 该 文档 ”中 ,弹出 “. stylel 的 CSS 规则 定义 ”对 话 框 ,在 “分 类 ”中 选择 “类 型 ”, 设 置 为 
“字体 : 楷体 ,大 小 : 14pt, 颜 色 : 黄色 ”, 单 击 “ 确 定 ” 按 钮 。 

(9) 重复 步骤 (8) ,将 名 称 改 为 “. style2” ,设置 为 “字体 : 宋体 ,大 小 : 10pt, 颜 色 : 白色 ”。 

(10) 重复 步骤 (8) ,将 名 称 改 为 ". style3”, 设 置 为 “字体 : 宋体 ,大 小 : 14px, 颜 色 : 
# FF6600", 

(11) 选择 “热爱 生命 ”四 个 字 , 打 开 “ 属 性 ”面板 ,在 “类 ”下 拉 列 表 框 中 选择 stylel 。 

(12) 选择 “热爱 生命 ”下面 的 大 段 文字 ,在 “类 ”下 拉 列 表 框 中 选择 style2 。 

(13) 选择 Flash 下 面 的 文字 ,打开 “属性 "面板 ,在 “类 ”下 拉 列 表 框 中 选择 style3 。 

(14) 按 Ctrl 十 S 快 捷 键 保 存 该 页 面 。 

(15) 打开 jianjie. html. 选择 “文本 ”>“CSS 样式 ”>“ 附 加 样式 表 ” 菜 单 命令 ,弹出 
图 4-26 所 示 的 “链接 外 部 样式 表 ” 对 话 框 , 单 击 “ 浏 览 ” 按 钮 选择 外 部 的 样式 表 文 件 new 
.Css，“ 添 加 为 ”选择 “链接 ”, 单 击 “ 确 定 ” 按 钮 。 


链接 外 部 样式 表 























图 4-26 “链接 外 部 样式 表 ” 对 话 框 


(16) 再 选择 “文本 ”>“CSS 样式 ”>“ 新 建 "菜单 命令 ,在 弹出 的 “新 建 CSS 规则 ”对 话 
框 中 ,将 选择 器 类 型 选择 为 “标记 ”,“ 名 称 ”为 ul,“ 定 义 在 ”选择 “ 仅 对 该 文档 ”中 ,弹出 “ul 
的 CSS 规则 定义 ”对 话 框 ,在 “分 类 ”中 选择 “列表 ”, 设 置 为 类型: 圆 点 ,项 目 符号 list 
. gif, 位 置 : 内 ”, 单 击 “ 确 定 ” 按 钮 。 
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(17) 选中 需要 设置 项 目 列表 的 文字 ,打开 “属性 ”面板 , 单 击 项 目 列表 汪 按 钮 。 

(18) f£ Ctrl 十 S 快捷 键 保存 该 页 面 。 

(19) 打开 wenxue. html, 选 择 “ 文 本 ”一 “CSS 样式 ”>“ 附 加 样式 表 ” 菜 单 命令 ,弹出 
图 4-26 所 示 的 “链接 外 部 样式 表 ” 对 话 框 , 单 击 “ 浏 览 ”按钮 选择 外 部 的 样式 表 文 件 new 
.Css，“ 添 加 为 ”选择 “链接 ”, 单 击 “ 确 定 ” 按 钮 。 

(20) 打开 浮动 面板 组 中 的 CSS 面板 ,选中 “样式 ”, 右 击 , 选 择 “ 新 建 ”命令 ,弹出 “新 建 
CSS 规则 ”对 话 框 ,将 选择 器 类 型 选择 为 “标记 ”, 在 “标记 ”下 拉 列 表 框 中 选择 img, “EM 
在 ”选择 “ 仅 对 该 文档 ”, 弹 出 “img 的 CSS 规则 定义 ”对 话 框 ,在 “分 类 ”中 选择 “边框 ”, 设 
置 为 “样式 : 上 、 下 、 左 、 布 都 为 疹 状 ,宽度 都 为 中 ,颜色 都 为 红色 ”, 单 击 “ 确 定 ” 按 钮 , 则 该 
页 面 中 所 有 二 img 之 标记 都 应 用 了 该 样式 。 

注意 :“ 边 框 ” 中 要 设置 上 、 下 、 左 、 右 都 一 样 的 效果 ,请 选中 “全 部 相同 ” 复 选 框 。 

(21) 按 Ctrl 十 S 快捷 键 保存 该 页 面 。 

(22) 打开 huihua. html, 选 择 “ 文 本 ”一 “CSS 样式 ”>“ 附 加 样式 表 ” 菜 单 命令 ,弹出 
图 4-26 所 示 的 “链接 外 部 样式 表 ” 对 话 框 , 单 击 “ 浏 览 ” 按 钮 选择 外 部 的 样式 表 文 件 new 
.Css，“ 添 加 为 ”选择 “链接 ”, 单 击 “ 确 定 ” 按 钮 。 

(23) 打开 浮动 面板 组 中 的 CSS 面板 ,选中 “样式 ”, 右 击 , 选 择 “ 新 建 " 命 令 , 弹 出 “新 建 
CSS 规则 ”对 话 框 ,将 选择 器 类 型 选择 为 “类 ”,“ 名 称 ” 为 “. xx”,“ 定 义 在 ”选择 “ 仅 对 该 文 
档 ”, 弹 出 *. xx 的 CSS 规则 定义 ”对 话 框 ,在 “分 类 ”中 选择 “扩展 ”, 设 置 为 “ 滤 镜 : Gray”. 
单 击 “ 确 定 ” 按 钮 。 

(24) 选择 “小熊 ?图像 ,打开 属性 面板 ,在 “类 ”下 拉 列 表 中 选择 xx。 

(25) 按 Ctrl 十 S 快捷 键 保存 该 页 面 。 

(26) 打开 donghua, html, 选 择 “ 文 本 ”>“CSS 样式 ”>“ 附 加 样式 表 ” 菜 单 命令 ,弹出 
“链接 外 部 样式 表 ” 对 话 框 , 单 击 * 浏 览 ” 按 钮 选择 外 部 的 样式 表 文 件 new. css, “RIMA” 3 
择 “ 链 接 ”, 单 击 “ 确 定 ” 按 钮 。 

(27) 打开 浮动 面板 组 中 的 CSS 面板 ,选中 “样式 ”, 右 击 ,选择 “新 建 "命令 ,弹出 “新 建 
CSS 规则 ”对 话 框 ,将 选择 器 类 型 选择 为 “标记 ”, 在 “标记 "下拉 列 表 框 中 选择 body. “定义 
在 ”选择 “ 仅 对 该 文档 ”。 弹出 “body 的 CSS 规则 定义 ”对 话 框 ,在 “背景 "中 选择 “背景 图 
像 ”, 设 置 为 back. gif, 选 择 * 重 复 ”, 设 置 为 “重复 ”, 选 择 * 附 件 ”, 设 置 为 “固定 ”, 单 击 “ 确 
定 ” 按 钮 , 则 该 页 面 中 就 会 出 现 该 背景 图 像 。 

(28) Fè Ctrl 十 S 快捷 键 保存 该 页 面 。 

(29) 打开 xinde. html, 选择 “文本 ”一 “CSS 样式 ”一 “附加 样式 表 ” 菜 单 命令 ,弹出 
图 4-26 所 示 的 “链接 外 部 样式 表 ” 对 话 框 , 单 击 “ 浏 览 ” 按 钮 选择 外 部 的 样式 表 文 件 new 
.Css，“ 添 加 为 ”选择 “链接 ”, 单 击 “ 确 定 ” 按 钮 。 

(30) 重复 步 又 (8)、(9) 。 

(31) 选择 “文本 ”>“CSS 样式 ”一 新建 菜单 命令 ,在 弹出 的 “新 建 CSS 规则 ”对 话 框 
中 ,将 选择 器 类 型 选择 为 “类 ”,“ 名 称 ” 为 “. style3”.“ 定 义 在 ”选择 “ 仅 对 该 文档 ”, 弹 出 
“. style3 的 CSS 规 则 定义 ”对 话 框 ,在 “分 类 ”中 选择 边框”, 设置 为 “样式 : 实 线 ,宽度 
2px, 颜 色 : 红色 ”, 单 击 “ 确 定 ” 按 钮 。 
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(32) 重复 步骤 (11) A2). 
(33) 选择 中 间 区 域 的 表格 ,打开 “属性 ”面板 ,在 “类 ”下 拉 列 表 框 中 选择 “style3”。 
(34) 按 Ctrl 十 S 快捷 键 保存 该 页 面 。 


本 章 小 结 
在 本 章 内 容 中 ,对 CSS 在 网 页 开发 中 的 应 用 做 了 介绍 ,读者 通过 本 章 的 学 习 可 以 了 


解 CSS 的 基本 的 概念 ,掌握 CSS 选择 器 和 CSS 样式 的 应 用 ,学 会 DIV 十 CSS 使 用 方法 ， 
学 会 如 何在 Dreamweaver 中 创建 CSS ,为 后 续 网 站 的 开发 做 准备 。 


本 章 习题 
一 、 选 择 题 
1. CSS 样式 按照 代码 放置 的 位 置 不 同 可 以 划分 为 3 种 CSS 样式 ,下 列 ( ) 不 是 
CSS 的 样式 。 
AL 嵌入 样式 B. 内 联 样式 C. 文件 样式 D. 外 联 样 式 


2. 下 列 代码 使 用 HTML 元 素 的 ID 属性 ,将 样式 应 用 于 网 页 上 的 某 个 段落 : <P id= 
"firstp" 之 这 是 一 个 段落 二 /P> ,下面 选 项 中 ,( ) 正 确定 义 了 上 面 代码 引用 的 样式 规则 。 
A. <Style Type="text/css"> P (color: red} </Style> 
B. <Style Type="text/css"> # firstp (color; red} </Style> 
C. «Style Type="text/css"> . firstp (color: red} </Style> 
D. «Style Type="text/css"> P. firstp (color: red} </Style> 
3. CSS 选择 器 通过 被 规则 指定 的 标记 ,对 文档 中 使 用 该 标记 的 内 容 进行 统一 的 外 观 
控制 。 下 面 ( ) 不 是 CSS 选择 器 。 
A. 标记 选择 器 B. 类 型 选择 器 C. ID 选择 器 D. 名 称 选择 器 
4. CSS 选择 器 中 标记 选择 器 和 类 型 选择 器 的 作用 范围 (  )。 


A. 标记 选择 器 大 于 类 型 选择 器 B. 标记 选择 器 等 于 类 型 选择 器 
C. 标记 选择 器 小 于 类 型 选择 器 D. 不 确定 

5. 能 够 定义 所 有 P 标记 内 文字 加 粗 的 是 ( js 
A. <p style="text-size: bold"> B. <p style="font-size: bold" > 
C. pítext-size; bold} D. p (font-weight; bold; } 


6. 下 列 CSS 语法 规则 正确 的 是 ( de 


A. body: color=black B. {body;color: black} 
C. body {color: black} D. (body: color=black: body} 
7. 关于 样式 的 说 法 不 正确 的 是 ( d. 
A. 样式 可 以 控制 网 页 背景 图 片 B. margin 属性 的 属性 值 可 以 是 百分比 


C. 字体 大 小 的 单位 可 以 是 em D. lem 等 于 18 像素 
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二 、 填空 题 
1. 在 HTML 中 加 入 CSS 的 方法 主要 有 和 
2. CSS 分 层 是 利用 标记 构建 的 分 层 。 


3. 定义 CSS 样式 表 时 ,最 常用 的 三 种 选择 器 (selector) 是 HTML 标记 符 、 
虚 类 。 
4. 应 用 ,网 页 元 素 将 依照 定义 的 样式 显示 ,从 而 统一 了 整个 网 站 的 风格 。 
三 、 简 答题 
1. CSS 指 的 是 什么 ? 在 网 页 制作 中 为 什么 要 使 用 CSS 技术 ? 
2. 网 页 制作 中 有 哪 几 种 样式 设置 方法 ? 各 有 何 特点 ? 
3. 简 述 DIV 十 CSS 是 什么 。 
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5.1 JavaScript 概述 





JavaScript 是 一 种 用 于 Web 程序 开发 的 编程 语言 , 它 功能 强大 ,主要 用 于 开发 交互 式 
Web Wifi, JavaScript 不 需要 进行 编译 ,可 以 直接 嵌入 HTML 页 面 中 ,把 静态 页 面 转变 
成 支持 用 户 交 互 并 响应 事件 的 动态 页 面 。 

在 浏览 网 页 时 ,除了 能 看 到 静态 的 文本 .图 像 ,有 时 也 能 看 到 浮动 的 动画 、 信 息 框 以 及 
动态 变换 的 时 钟 信息 等 。 页 面 上 这 些 实时 的 、 动 态 的 .可 交互 的 网 页 效果 在 Web 应 用 开 
发 时 可 以 使 用 JavaScript 语言 编写 实现 。 下 面 针 对 JavaScript 的 起 源 、 主 要 特点 以 及 应 
用 进行 详细 讲解 。 


5.1.1 JavaScript 的 起 源 


JavaScript 是 Web 页 面 中 的 一 种 脚本 编程 语言 ,也 是 一 种 通用 的 、 跨 平台 的 、 基 于 对 
象 和 事件 驱动 并 具有 安全 性 的 脚本 语言 。JavaScript 的 前 身 是 LiveScript, 是 由 Netscape 
(网 景 ) 公 司 开发 的 脚本 语言 。 后 来 在 Sun 公司 推出 著名 的 Java 语言 之 后 ,Netscape 公司 
和 Sun 公司 于 1995 年 一 起 重新 设计 了 LiveScript, 并 把 它 改 名 为 JavaScript。 

在 概念 和 设计 方面 ,Java 和 JavaScript 是 两 种 完全 不 同 的 语言 。Java 是 面向 对 象 的 
程序 设计 语言 ,用 于 开发 企业 级 应 用 程序 ,而 JavaScript 是 在 浏览 器 中 执行 ,用 于 开发 客 
户 端 浏览 器 的 应 用 程序 ,能 够 实现 用 户 与 浏览 器 的 动态 交互 。 


5.1.2 JavaScript 的 主要 特点 


JavaScript 是 一 种 基于 对 象 (Object) 和 事件 驱动 (Event Driven) 并 具有 安全 性 能 的 
解释 性 脚本 语言 , 它 具 有 以 下 主要 特点 : 

* 解释 性 。JavaScript 不 同 于 一 些 编译 性 程序 语言 (如 CLC ++ 等 ) , 它 是 一 种 解释 性 
程序 语言 , 它 的 源 代码 不 需要 进行 编译 ,而 是 直接 在 浏览 器 中 解释 执行 。 
基于 对 象 。JavaScript 是 一 种 基于 对 象 的 语言 , 它 的 许多 功能 来 自 于 脚本 环境 中 
对 象 的 方法 与 脚本 的 相互 作用 。 在 JavaScript 中 , 既 可 以 使 用 预定 义 对 象 ,也 可 
以 使 用 自 定义 对 象 。 
。 事件 驱动 。JavaScript 可 以 直接 对 用 户 或 客户 的 输入 做 出 响应 ,无 须 经 过 Web AR 
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务 程 序 , 而 是 以 事件 驱动 的 方式 进行 的 。 例 如 单 击 鼠 标 、 移 动 窗口 .选择 菜单 等 事 
件 发 生 后 ,可 以 引起 事件 的 响应 。 

。 跨 平台 性 。 在 HTML 页 面 中 ,JavaScript 依赖 于 浏览 器 本 身 ,与 操作 环境 无 关 。 
只 要 在 计算 机 上 安装 了 支持 JavaScript 的 浏览 器 ,程序 就 可 以 正确 执行 。 

。 安全 性 。JavaScript 是 一 种 安全 性 语言 , 它 不 允许 访问 本 地 硬盘 ,也 不 能 对 网 络 文 
档 进行 修改 和 删除 ,而 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 。 


5.1.3 JavaScript 的 应 用 


作为 一 门 独立 的 编程 语言 ,JavaSeript 可 以 做 很 多 事情 ,但 它 最 主流 的 应 用 还 是 在 
Web 上 ,例如 创建 网 页 特效 。 使 用 JavaScript 脚本 语言 实现 的 动态 页 面 在 网 页 上 随处 可 
见 。 下 面 介 绍 JavaScript 的 常见 应 用 。 

1. 验证 用 户 输入 的 内 容 

使 用 JavaScript 脚本 语言 可 以 在 客户 端 对 用 户 输入 的 内 容 进 行 验 证 。 例 如 ,在 用 户 
注册 页 面 ,要 求 用 户 输入 注册 信息 ,使 用 JavaScript 可 以 判断 用 户 输入 的 手机 号 .昵称 及 
密码 是 否 正确 ,如 图 5-1 所 示 。 如 果 用 户 在 注册 信息 文本 框 中 输入 的 信息 不 符合 注册 要 
求 , 或 “确认 密码 ”与 “密码 ”文本 框 中 输入 的 信息 不 同 ,将 弹出 相应 的 提示 信息 ,如 图 5-2 
所 示 。 


注册 问答 精灵 





D mmm e 





注册 问答 精灵 手机 号 格式 有 误 ， 请 重新 输入 ! 

手机 号 Q FA © 
D ee GB) eeceecee © 
Ô ss e 





两 次 密码 输入 不 一 到 ， 请 重新 输入 。 
立即 注册 
后 同意 问答 转录 注册 条 孝 A E EL EEN 


图 5-1 用 户 注册 页 面 图 5-2 弹出 提示 信息 











2. 网 页 动画 效果 

在 浏览 网 页 时 ,经 常会 看 到 一 些 动画 效果 ,使 页 面 显得 更 加 活泼 ,生动 。 使 用 
JavaScript 脚本 语言 也 可 以 实现 动画 效果 ,例如 可 以 在 页 面 中 实现 焦点 图 切换 效果 。 

3. 窗口 的 应 用 

TETTE MAN AKASH OH SAMO. ee SAO ERR KH BAF 
段 。 广 告 窗口 也 可 以 通过 JavaScript 脚本 语言 实现 。 
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4. 文字 特效 
使 用 JavaScript 脚本 语言 可 以 使 文字 出 现 多 种 特效 ,例如 文字 跳动 等 。 


5.2 JavaScript 引入 方式 





在 HTML 文档 中 ,JavaScript 脚本 文件 的 使 用 和 CSS 样式 文件 类 似 。 在 HTML X 
档 中 引入 JavaScript 文件 有 两 种 方式 : 一 种 是 在 HTML 文档 中 直接 散人 入 JavaScript 脚 
本 , 另 一 种 是 链接 外 部 的 JavaScript 脚本 文件 。 


5.2.1 {E HTML 页 面 中 嵌入 JavaScript 脚本 


在 HTML 文档 中 ,通过 过 script 之 标记 及 其 相关 属性 可 以 引入 JavaScript 代码 。 
< 一 script 之 标记 的 常用 属性 如 表 5-1 所 示 。 
表 5-1 一 script 二 标记 的 常用 属性 及 说 明 

















属 性 说 明 

language 设置 所 使 用 的 脚本 语言 及 版 本 

sre 设置 外 部 脚本 文件 的 路 径 位 置 

type 设置 所 使 用 的 脚本 语言 ,此 属性 已 代替 language 属性 
defer 当 HTML 文档 加 载 完 毕 后 再 执行 脚本 语言 


1. language 属性 
language 属性 用 于 指定 在 HTML 中 使 用 的 脚本 语言 及 其 版 本 。language 属性 的 使 
用 格式 如 下 : 


<script language= "javascript">< /script> 


2. src 属性 
src 属性 用 于 指定 外 部 脚本 文件 的 路 径 。 外 部 脚本 文件 通常 使 用 JavaScript 脚本 ,其 
扩展 名 为 .js。src 属性 的 使 用 格式 如 下 : 





<script src="01.js">< /script> 


3. type 属性 
type 属性 用 于 指定 HTML 中 使 用 的 脚本 语言 及 其 版 本 。 该 属性 从 HTML 4.0 标 
准 开 始 ,推荐 使 用 type 属性 代替 language 属性 。type 属性 的 使 用 格式 如 下 : 


<script type="text/javascript">< /script> 


4. defer 属性 
defer 属性 的 作用 是 当 文 档 加 载 完毕 后 再 执行 脚本 。 当 脚本 语言 不 需要 立即 运行 时 ， 
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设置 defer 属性 ,浏览 器 将 不 必 等 待 脚本 语言 装载 ,这 样 页 面 加 载 速度 会 更 快 。 但 当 一 些 
脚本 需要 在 页 面 加 载 过程 中 或 加 载 完成 后 立即 执行 时 ,就 不 需要 使 用 defer 属性 。defer 
属性 的 使 用 格式 如 下 : 


<script defer>< /script> 
在 HTML 文档 中 ,可 以 通过 二 script 二 标记 栓 入 JavaScript 代码 ,具体 代码 如 下 : 


<script type= "text/javascript"> 
javascript 代码 
</script> 


当 HTML 文件 嵌入 JavaScript 程序 代码 后 ,浏览 器 程序 在 读 到 二 script 二 标记 时 ,就 
解释 执行 其 中 的 脚本 。 其 中 ,二 script 二 标记 可 以 放 在 Web 3t ifii ff <head> -</head> 
标记 中 s tE A AIE <body>- </body> PRW P. il, TE <body> -</body> PRE 
中 可 以 输入 以 下 代码 : 

<script type="text/javascript"> 


alert ("我 要 去 学 习 JavaScript !") // 弹 出 警告 框 
</script> 


需要 注意 的 是 ,JavaScript 脚本 可 以 放 在 二 body 二 标记 中 的 任何 位 置 。 如 果 所 编写 
的 JavaScript 程序 用 于 输出 网 页 的 内 容 ,应 该 将 JavaScript 程序 置 于 HTML 文件 中 需要 
显示 该 内 容 的 位 置 。 

5.2.2 {E HTML 页 面 中 链接 外 部 的 JavaScript 文件 

在 Web 页 面 引 入 JavaScript 的 另 一 种 方法 是 采用 链接 外 部 JavaScript 文件 的 形式 。 
如 果 脚 本 代码 比较 复杂 或 是 同一 段 代 码 需要 被 多 个 页 面 使 用 , 则 可 以 将 这 些 脚本 代码 放 
置 在 一 个 单独 的 文件 中 (保存 文件 的 扩展 名 是 . js) ,然后 在 需要 使 用 该 代码 的 Web 页 面 
中 链接 该 JavaScript 文件 即 可 。 

在 Web 页 面 中 链接 外 部 JavaScript 文件 的 语法 格式 如 下 : 

<script type= "text/javascript" src="myjs.js">< /script> 


需要 注意 的 是 ,调用 外 部 文件 myjs. js 时 .首先 需要 编写 外 部 的 JavaScript 文件 ,并 命 
名 为 myjs. js。 然 后 ,在 HTML 页 面 中 调用 外 部 的 JavaScript 文件 myjs. js. 


5.3 JavaScript 语法 





5.3.1 JavaScript 的 基本 语法 规则 


每 一 种 计算 机 语言 都 有 自己 的 基本 语法 ,学 好 基本 语法 是 学 好 编程 语言 的 关键 。 同 
样 ,学 习 JavaScript 语言 ,也 需要 遵从 一 定 的 语法 规范 ,如 执行 顺序 、 大 小 写 问 题 以 及 注释 
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语句 等 。 

1. 执行 顺序 

JavaScript 程序 按照 在 HTML 文件 中 出 现 的 顺序 逐 行 执行 。 如 果 某 些 代码 (例如 画 
数 、 全 局 变量 等 ) 需 要 在 整个 HTML 文件 中 使 用 ,最 好 将 其 放 在 HTML cf <head>. . . 
去 /head> 标 记 中 。 某 些 代码 ,如 函数 体内 的 代码 ,不 会 被 立即 执行 ,只 有 当 所 在 的 函数 被 
其 他 程序 调用 时 ,该 代码 才 会 被 执行 。 

2. 区 分 大 小 写 

JavaScript 严格 区 分 字母 大 小 写 。 也 就 是 说 ,在 输入 关键 字 、 函 数 名 、 变 量 及 其 他 标 
识 符 时 ,都 必须 采用 正确 的 大 小 写 形式 。 例 如 ,变量 username 与 变量 userName 是 两 个 
不 同 的 变量 。 

3. 每 行 结尾 的 分 号 可 有 可 无 

JavaScript 语言 并 不 要 求 必须 以 分 号 (;) 作 为 语句 的 结束 标记 。 如 果 语 句 的 结束 处 
没有 分 号 ,JavaScript 会 自动 将 该 行 代码 的 结尾 作为 语句 的 结尾 。 例 如 ,下 面 两 行 代码 都 
是 正确 的 。 

alert ("您 好 ,欢迎 学 习 JavaScript!") 

alert ("您 好 ,欢迎 学 习 JavaScript!"); 

应 该 注意 的 是 ,最 好 的 代码 编写 习惯 是 在 每 行 代 码 的 结尾 处 加 上 分 号 ,这 样 可 以 保证 
代码 的 严谨 性 和 准确 性 。 

4. 注释 

在 编写 程序 时 ,为 了 使 代码 易于 阅读 ,通常 需要 为 代码 加 一 些 注释 。 注 释 是 对 程序 中 
某 个 功能 或 者 某 行 代码 的 解释 说明, 用 来 提高 代码 的 可 读 性 ,而 不 会 被 JavaScript 当成 
代码 执行 。 

JavaScript 为 开发 人 员 提 供 了 两 种 注释 形式 : 单行 注释 和 多 行 注释 ,具体 如 下 : 

CD 单行 注释 使 用 双 和 斜 线 “//” 作 为 注释 标记 .将 “//” 放 在 一 行 代码 的 末尾 或 者 单独 
一 行 的 开头 , 它 后 面 的 内 容 就 是 注释 部 分 。 

(2) 多 行 注释 可 以 包含 任意 行 数 的 注释 文本 。 多 行 注释 是 以 “/ * ”标记 开始 ,以 
“x#/” 标 记 结 束 , 中 间 的 所 有 内 容 都 为 注释 文本 。 这 种 注释 可 以 跨行 书写 ,但 不 能 有 嵌 套 
的 注释 。 

下 面 是 合法 的 JavaScript 注释 : 

// 这 里 的 单行 注释 

/* 这 里 是 一 段 注释 * /，// 这 里 是 另 一 段 注 释 


/* 这 里 是 多 行 注释 
*/ 


5.3.2 变量 的 志明 与 赋值 
在 JavaScript 中 ,使 用 变量 前 需要 先 对 其 进行 声明 。 所 有 的 JavaScript 变量 都 由 关 
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键 字 var 声明 ,语法 格式 如 下 : 
var abc; 
在 声明 变量 的 同时 也 可 以 对 变量 进行 赋值 ,例如 : 
var abc-1; 


声明 变量 时 ,需要 遵循 的 规则 如 下 : 
(1) 可 以 使 用 一 个 关键 字 var 同时 声明 多 个 变量 ,例如 : 


var arbyc // 同 时 声明 a,b c 三 个 变量 
(2) 可 以 在 声明 变量 的 同时 对 其 赋值 , 即 初始 化 ,例如 : 
var a=1,b=2,c=3; // 同 时 声明 ab 和 c 三 个 变量 ,并 分 别 对 其 进行 初始 化 


(3) 如 果 只 是 声明 了 变量 ,并 未 对 其 赋值 , 则 其 默认 为 undefined, 

(4) var 语句 可 以 用 作 for 循环 和 for/in 循环 的 一 部 分 ,这 样 就 使 循环 变量 的 声明 成 
为 循环 语法 自身 的 一 部 分 ,使 用 起 来 比较 方便 。 

(5) 使 用 var 语句 多 次 声明 同一 个 变量 ,如 果 重 复 声明 的 变量 已 经 有 一 个 初始 值 , 那 
么 此 时 的 声明 就 相当 于 对 变量 的 重新 赋值 。 

当 给 一 个 尚未 声明 的 变量 赋值 时 ,JavaScript 会 自动 用 该 变量 名 创建 一 个 全 局 变量 。 
在 一 个 函数 内 部 ,通常 创建 的 只 是 一 个 仅 在 函数 内 部 起 作用 的 局 部 变量 ,而 不 是 一 个 全 局 
变量 。 创 建 一 个 局 部 变量 ,并 不 是 简单 地 赋值 给 一 个 已 经 存在 的 局 部 变量 ,必须 使 用 var 
语句 进行 变量 的 声明 。 

另外 ,由 于 JavaScript 采用 弱 类 型 的 形式 ,可 以 不 理会 变量 的 数据 类 型 , 即 可 把 任意 
类 型 的 数据 赋值 给 变量 。 

例如 ,声明 一 些 变量 ,具体 代码 如 下 : 


var a=100 // 数 值 类 型 
var str=" 网 页 平面 设计 学 院 " // 字 符 串 类 型 
var bue=true // 布 尔 类 型 


值得 注意 的 是 ,在 JavaScript 中 ,变量 可 以 先 不 声明 ,而 在 使 用 时 ,根据 变量 的 实际 作 
用 确定 其 所 属 的 数据 类 型 ,为 了 良好 的 编程 习惯 和 能 够 及 时 发 现代 码 中 的 错误 ,建议 在 使 
用 变量 前 对 其 声明 。 


5.3.3 KAŽ 


在 JavaScript 中 ,经 常会 遇 到 程序 需要 多 次 重复 操作 的 情况 ,这 时 就 需要 重复 书写 相 
同 的 代码 ,这 样 不 仅 加 重 了 开发 人 员 的 工作 量 , 而 且 对 于 代码 的 后 期 维护 相当 困难 。 为 
此 ,JavaScript 提供 了 函数 , 它 可 以 将 程序 中 烦琐 的 代码 模块 化 ,提高 程序 的 可 读 性 ,并 且 
便于 后 期 维护 。 

1. 函数 定义 

为 了 使 代码 更 为 简洁 并 可 以 重复 使 用 ,通常 会 将 某 段 实现 特定 功能 的 代码 定义 成 一 
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个 函数 。 在 JavaScript 程序 设计 中 ,所 谓 函 数 就 是 在 计算 机 程序 中 由 多 条 语句 组 成 的 逻 
辑 单 元 ,在 JavaScript 中 ,函数 使 用 关键 字 function 定义 ,其 语法 格式 如 下 : 

< script type= "text/javascript"> 

function 函数 名 ([ 参 数 1, 参 数 2,...1){ 
函数 体 

} 

</script> 

从 上 述 语法 格式 可 以 看 出 ,函数 的 定义 由 关键 字 function," PRA” “BBC Al PR 
体 ”4 部 分 组 成 ,关于 这 4 部 分 的 相关 说 明 如 下 : 

。 function 一 一 在 声明 函数 时 必须 使 用 的 关键 字 。 

。 函数 名 一 一 创建 函数 的 名 称 ,是 唯一 的 。 

* 参数 一 一 外 界 传递 给 函数 的 值 ,是 可 选 的 , 当 有 多 个 参数 时 ,各 参数 用 “, ”分 隔 。 

， 函数 体 一 一 函数 定义 的 主体 ,专门 用 于 实现 特定 的 功能 。 

对 函数 定义 的 语法 格式 有 所 了 解 后 ,下 面 定义 一 个 无 参 函数 show O ,并 在 函数 体 中 
输出 “欢迎 光临 ,网 页 平面 设计 学 院 ”, 具 体 示例 如 下 : 

<script type= "text/javascript"> 

function show() { 
alert(" 欢 迎 光临 ,网 页 平面 设计 学 院 ")， 

} 

</script> 

上 述 代码 定义 的 show O PR CBE fid FE BEAT E 305 30 OF EL PR CH HAL alert O 
语句 返回 一 个 字符 串 。 

2. 函数 的 调用 

PA PR RGE SC SERJE ERE TE EET PAZ E PRU FE E o HEISE GC BR C. PRI ITI 
非常 简单 ,只 需 引 用 函数 名 ,并 传人 相应 的 参数 即 可 。 函 数 调 用 的 语法 格式 如 下 : 


函数 名 称 ([ 参 数 1, 参 数 2, ..….]) 


在 上 述 语法 格式 中 ,“[ 参 数 1, 参 数 2,...]? 是 可 选 的 ,用 于 表示 参数 列表 ,其 值 可 以 是 一 
个 或 多 个 。 

为 了 使 初学 者 能 够 更 好 地 理解 函数 调用 ,下 面 通过 一 个 案例 演示 函数 的 调用 。 

例 5-1 函数 调用 示例 。 


< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

“http: //waw.w3.org/TR/xhtml1/DID/xhtml1- transitional .dtd"> 

<html xmins- "http: //www.w3.org/1999/xhtmL"> 

<head> 

«meta http- equiv= "Content-Type" content- "text/html; charset-utf- 8" /> 
<title> 无 标题 文档 < /title> 

< /head» 
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<body> 
«button onclick- "show() "> 点击 这 里 < /button» < 上 !-- 通 过 鼠标 点 击 事件 调用 函数 --> 
< /body> 
</html> 
<script type="text/javascript"> 
function show () { 
alert ("欢迎 光临 "); 
$ 
</script> 
< /body> 
</html> 


在 上 述 代码 中 ,首先 定义 了 一 个 名 为 show() 的 函数 ,该 函数 比较 简单 , 仅 使 用 alert() 语 
名 返回 一 个 字符 串 , 然 后 在 按钮 onclick 事件 中 调用 show O 函数。 其 中 本 案例 使 用 的 
onclick 事件 将 在 后 面 做 具体 介绍 ,此 处 了 解 即 可 。 

运行 例 5-1, 结 果 如 图 5-3 所 示 。 单 击 图 5-3 中 的 按钮 , 即 会 弹出 图 5-4 所 示 的 警示 框 。 


T ) 函数 的 调用 - Morilla Firefor 
Xo) MID F D 文件 四 do 
é>? 
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图 5-3 函数 调用 1 图 5-4 函数 调用 2 


5.3.4 JavaScript 中 的 对 象 


1. 对 象 简介 

JavaScript 所 实现 的 动态 功能 , 基本 上 都 是 对 HTML 文档 或 者 HTML 文档 运行 环 
境 进行 的 操作 。 那 么 要 实现 这 些 动态 功能 就 必须 找到 相应 的 对 象 。JavaScript 中 有 已 经 
定义 过 的 对 象 供 开发 者 调用 ,在 了 解 这 些 对 象 之 前 先 看 图 5-5 所 示 的 内 容 。 





window 








I I I 1 
navigator screen history location 












































document 





5-5 在 浏览 器 窗口 中 的 文档 对 象 模型 


图 5-5 中 的 内 容 是 一 个 简单 的 HTML 文档 在 浏览 器 窗口 中 的 文档 对 象 模型 ,其 中 
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window, navigator, screen, history, location 都 是 HTML 文档 运行 所 需 的 环境 对 象 ， 
document 对 象 才 是 前 面 讲述 的 HTML 文档 ,当然 这 个 document 对 象 还 可 以 划分 出 
html, head, body 等 分 支 。 
window 对 象 是 所 有 对 象 中 最 顶层 的 对 象 ,HTML 文档 在 window 对 象 中 显示 。 
navigator 对 象 可 以 读 取 浏览 器 相关 的 信息 。 
screen 对 象 可 以 读 取 浏 览 器 运行 的 物理 环境 ,例如 屏幕 的 宽 和 高 ,单位 为 像素 。 
document 对 象 是 整个 网 页 HTML 内 容 , 每 个 HTML 文档 被 浏览 器 加 载 以 后 都 
会 在 内 存 中 初始 化 一 个 document 对 象 。 
history 对 象 可 以 控制 浏览 器 的 前 进 和 后 退 。 
location 对 象 可 以 控制 页 面 的 跳 转 。 

这 些 对 象 中 , 较 常 用 的 有 window 对 象 .document 对 象 和 location MK. 

2. window 对 象 

window 对 象 是 所 有 JavaScript 对 象 中 最 顶层 的 对 象 ,整个 HTML 文档 就 是 一 个 浏 
览 器 窗口 , 当 打 开 一 个 浏览 器 窗口 以 后 .不管 有 没有 内 容 , 都 会 在 内 存 中 形成 一 个 
window 对 象 。window 对 象 所 提供 的 方法 很 多 ,在 下 面 的 内 容 中 介绍 最 常用 的 几 种 
方法 。 

1) 窗 体 的 创建 和 关闭 

利用 window 对 象 可 以 新 建 浏览 器 窗口 ,也 可 以 关闭 浏览 器 窗口 ,下 面 来 看 具体 的 操 
作 代 码 。 

例 5-2 窗 体 的 创建 和 关闭 示例 。 


<html> 
<head> 
<title> 窗 体 的 创建 和 关闭 示例 < /title> 
<script type="text/javascript"> 
var win; 
function createWin() { 
win=window.open("","", "width= 300, height- 200") ; 
} 
function closeWin() { 
if (win) { 
win.close(); 
$ 
} 
</script> 
</head> 
<body> 
<form 
«input type="button" value= "创建 新 窗口 " onclick= "createWin () "> 
«input type="button" value- "关闭 新 窗口 " onclick= "closeWin()"» 
«/form» 
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</body> 
</html> 


这 个 程序 在 浏览 器 中 运行 以 后 ,界面 上 会 有 两 个 按钮 单 击 * 创 建新 窗口 ?按钮 会 弹出 
一 个 新 的 浏览 器 窗口 ,这 个 窗口 的 宽 为 300 像素 ,高 为 200 像素 ; 单 击 “ 关 闭 新 窗口 ”按钮 ， 
这 个 弹出 窗口 就 会 被 关闭 。 

上 面 这 个 程序 中 用 到 的 就 是 window 对 象 的 open 和 close 两 个 方法 ,open 方法 新 建 
一 个 窗口 ,close 方法 关闭 指定 窗口 。 

2) 三 种 常用 的 对 话 框 

在 window 对 象 中 ,有 三 种 常用 的 对 话 框 : 第 一 种 是 警告 对 话 框 ,第 二 种 是 确认 对 话 
框 ,第 三 种 是 输入 对 话 框 。 下 面 这 个 示例 中 展示 了 这 三 个 对 话 框 的 用 法 。 

例 5-3 三 种 常用 的 对 话 框 。 


<html> 
<head> 
<title> 三 种 常用 的 对 话 框 < /title> 
<script type= "text/javascript"> 
function alertDialog() { 
alert ("您 成 功 执行 了 这 个 操作 。"); 
} 
function confirmDialog() { 
if (window.confirm(" 您 确认 要 进行 这 个 操作 吗 ?")) 
alert ("您 选择 了 确定 !"); 
else 
alert ("您 选择 了 取消 "); 
} 
function promptDialog() { 
var input=window.prompt ("请 输入 内 容 :"); 
if (input !=null) 
Í 
window.alert (" 您 输入 的 内 容 为 "+ input); 
} </script> 
</head> 
<body> 
«form» 
«input type="button" value= "警告 对 话 框 " onclick- "alertDialog()"» 
«input type="button" value= "确认 对 话 框 ” onclick= "confirmDialog()"» 
«input type="button" value= "输入 对 话 框 " onclick= "promptDialog () "> 
«/form» 
< /body> 
</html> 
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运行 结果 如 图 5-6 所 示 。 


D 三 种 常用 的 对 话 框 x 
(Bee) UE) [输入 对 话 框 _] 


图 5-6 三 种 常用 的 对 话 框 














单 击 “ 警 告 对 话 框 ”按钮 时 ,会 弹出 图 5-7 所 示 的 警告 对 话 框 。 
单 击 “ 确 认 对 话 框 ”按钮 时 ,会 弹出 图 5-8 所 示 的 确认 对 话 框 。 









A Sucre Tate. QD wu tem? 
图 5-7 警告 对 话 框 图 5-8 确认 对 话 框 


单 击 “ 输 入 对 话 框 ”按钮 时 ,会 弹出 图 5-9 所 示 的 输入 对 话 框 。 





图 5-9 输入 对 话 框 


在 上 面 这 个 程序 中 ,对 后 两 种 对 话 框 的 返回 值 也 进行 了 示例 处 理 , 参 照 上 面 的 格式 稍 
加 修改 就 可 以 用 到 用 户 的 程序 中 去 。 

3. document 对 象 

document 对 象 是 在 具体 的 开发 过 程 中 用 的 最 频繁 的 对 象 ,利用 document 对 象 可 以 
访问 页 面 上 的 任何 元 素 。 通 过 控制 这 些 元 素 可 以 完成 与 用 户 的 互动 。 

1) 利用 document 定位 HTML 页 面 元 素 

所 有 HTML 页 面 元 素 都 可 以 用 document. getElementById() 方 法 访问 ,还 有 一 部 分 
HTML 页 面 元 素 可 以 使 用 数组 访问 。 例 如 ,表单 元 素 就 可 以 使 用 document. forms 
["formName"] 或 者 document. forms[ "formIndex"] 访 问 ,其 中 formName 是 表单 的 名 
称 ,formIndex 是 表单 的 序号 。 

当 HTML 页 面 中 使 用 了 框架 集 frameset 时 .使 用 document 对 象 定位 frame 中 的 元 
素 时 ,首先 要 取得 frame 的 document 对 象 ,然后 在 这 个 对 象 上 继续 操作 。 这 个 document 
对 象 可 以 这 样 获得 : document. frames[ " framesName" ]. document, 这 里 的 framesName 
是 frame 的 名 称 , 取 得 的 这 个 frame 的 document 对 象 使 用 方法 和 其 他 document 的 使 用 
方法 是 一 样 的 ,在 这 个 document 基础 上 可 以 继续 定位 frame 中 的 元 素 。 
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2) 利用 document 对 象 动态 生成 HTML 页 面 

用 document 对 象 不 仅 可 以 取出 或 者 设置 HTML 页 面 元 素 的 值 ,而 且 可 以 动态 地 生成 
整个 新 的 HTML 文档 。 下 面 的 例子 就 是 利用 document 对 象 生成 一 个 新 的 HTML 文档 。 

例 5-4 动态 生成 HTML 页 面 。 


<html> 
<head> 
<title> 动 态 生成 HTML 页面 < /title> 
<script type= "text/javascript"> 
function create() { 
var content- "<html><head><title> 动 态 生 成 的 HTML 文档 < /title> </head>"; 
content+="<body>< font size= '2"><b> 这 个 文档 的 内 容 是 利用 document 对 象 动态 生成 的 
</b></font></hl> "; 
content+="< /body> « /html» "; 
var newWindow- window.open () ; 
newWindow.document .write (content); 
newWindow.document .close() 
} 
</script> 
</head> 
<body> 
<form 
«input type="button" value= "创建 HTML 文档 ”onclick= "create () "> 
</form 
</body> 
</html> 


在 上 面 这 个 示例 程序 中 ,利用 JavaScript 动态 生成 一 个 HTML 代码 串 , 并 且 利 用 
document 对 象 把 这 段 代 码 串 写 人 新 建 窗口 的 document 对 象 中 ,这 样 就 完成 动态 生成 
HTML 页 面 的 功能 ,此 处 如 果 是 在 原 窗 体 显 示 ,那么 只 需要 把 新 建 的 窗 体 对 象 替 换 成 当 
前 窗 体 的 window 对 象 即 可 。 

上 面 的 程序 在 浏览 器 中 打开 以 后 ,会 显示 图 5-10 所 示 的 操作 页 面 , 单 击 “ 创 建 
HTML 文档 ”按钮 ,就 会 弹出 一 个 图 5-11 所 示 的 
新 窗 体 , 窗 体内 容 是 利用 document 对 象 动态 创 
建 的 。 

注意 ,在 JavaScript 的 字符 串 操作 中 ,不 允许 
EAS SPRER S MAEM SIS PREM 
“ALEC APS | n] EL eS ED BET ERS S RREA St ELTE H | s rc 
套 双 引号 。 


LJ 昌 动态 生成 HTML 页 面 








5-30 操作 页 面 


= 生动 态 生成 的 HTML 文 档 x 


图 5-11 利用 document 对 象 动态 生成 的 HTML 页 面 
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4. location 对 象 

在 HTML 标记 中 ,可 以 用 二 a 之 过/a> 超 链接 标记 控制 网 页 中 的 跳 转 。 在 
JavaScript 中 ,如 果 要 实现 类 似 的 网 页 跳 转 功能 只 能 选择 location 对 象 ,这 个 对 象 的 使 用 
方法 非常 简单 ,只 需要 在 JavaScript 代码 中 添加 下 面 一 行 代码 即 可 。 

window.location.href- "http://www.sohu.com"; 

window 对 象 就 是 要 控制 的 目标 窗 体 ,赋值 的 内 容 就 是 窗 体 将 要 跳 转 到 的 页 面 ,这 行 
代码 可 以 实现 类 似 超 链 接 标 记 的 效果 。 

JavaScript 常用 内 建 对 象 和 预定 义 函 数 详 见 附 录 Bs JavaScript 常用 事件 见 附 
录 C. 


5.4 编写 JavaScript 程序 





JavaScript 程序 的 编写 可 以 使 用 记事 本 等 文本 工具 ,也 可 以 使 用 Dreamweaver 工具 ， 
可 以 启动 Dreamweaver 编辑 器 ,新 建 一 个 HTML 默认 文档 。 在 HTML 代码 中 嵌入 
JavaScript 代码 ,如 例 5-5 所 示 。 

例 5-5 编写 一 个 简单 的 JavaScript 程序 。 


< !DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

“http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"> 

<html xmlns= "http: //www.wW3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv= "Content-Type" content= "text/html; charset=utf- 8" /> 

<title> 第 一 个 简单 的 JavaScript 程序 < /title» 

</head> 

<body> 

<div style="font- size:18px;"> 

<script type- "text/javascript"» 
alert ("Hello,JavaScript!"); // 弹 出 信息 警示 框 
prompt ("请 输入 密码 1") ; // 弹 出 输入 提示 框 

</script> 

</div> 

< /body> 

</html> 


保存 为 . html 文件 格式 后 ,在 浏览 器 中 运行 ,将 弹出 一 个 警示 框 , 如 图 5-12 所 示 。 单 
击 “ 确 定 ” 按 钮 后 ,将 会 继续 弹出 一 个 输入 提示 框 ,如 图 5-13 所 示 。 

例 5-6 编写 一 个 图 5-14 所 示 的 JavaScript 的 演示 程序 ,在 不 同 的 时 间 段 输出 相应 
的 提示 , 当 单 击 “ 关 闭 窗口 ?链接 时 给 出 相应 的 提示 :如 图 5-15 所 示 。 
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LI e | 


8 Xo MEO 查看 WD neo 


OS Gemma 
人 第 一 个 简单 的 Javascript 程 序 


Hello, JavaScript! 
T^ 阻止 此 页 面 创 建 更 多 对 活 杠 


| 





图 5-13 弹出 输入 提示 框 





[JJ D JAVASCRIPT 


今天 是 公元 2016 年 5 月 26 日 星期 四 
下 午 好 ! 











关闭 窗口 
图 5-14 JavaScript 演示 效果 








您 查看 的 网 页 正在 试图 关闭 窗口 。 


是 否 关闭 此 窗口 ? 


Caw ]| mw J 


图 5-15 “关闭 窗口 "提示 框 








<html> 
<head> 


«meta http- equiv- "Content- Type" content- "text/html; charset=gb2312"> 
«title» JAVASCRIPT 脚本 演示 < /title» 

<script language- "javascript"» 

function click() ( 

if (event.button--2) ( // 改 成 button==1 为 禁止 左 键 

alert ("对 不 起 ,禁止 使 用 此 功能 .") 

} 

} 

document .onmousedown= click 

</script> 

</head> 

<body onUnload- "window.alert (" 谢 谢 你 的 光临 ! 欢 迎 下 次 再 来 ! 0) "> 


<p align="center"> 
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<SCRIPT language- "JavaScript"» 


var enabled- 0; today- new Date () ; 






var day; var date; 

if (today.getDay ()==0) day=- "星期 日 " 
if(today.getDay ()==1) day- "星期 一 " 
if (today.getDay ()==2) day= "星期 
if(today.getDay()==3) day= "星期 三 
if (today..getDay ()==4) day- "星期 四 " 





if(today.getDay()==5) day= "星期 五 " 
if (today.getDay ()== 6) day= "星期 六 " 
document .fgColor=" FF0072"; 
datel= (today.getYear()) +" 年 "+ (today.getMonth ()+1 )4 "JJ "+ today.getDate ()  "H "+ 
date2- day; 
document.write ("< center» "+ "< font size-3 color= red» "+ "今天 是 公元 "+ datel. fontsize (3) 
+date2.fontsize (3)+ "< /font» "+ "< /center> "); 
document.write ("< center» < font color=# 0066ff size=+1>") 
hr-today.getHours () 


if (hr--1) 

document .write(" 凌 晨 一 点 已 过 , 别 忘 了 休息 唾 !”) 

if (hr==2) 

document .write ("该 休息 了 ,身体 可 是 革命 的 本 钱 啊 !") 
if (hr==3) 

document .write(" 夜 深入 静 ,只 有 你 敲 击 鼠标 的 声音 .….") 
if (hr==4) 
document.write ("四 点 过 了 ,你 明天 不 上 班 ?2??") 

if (hr==5) 


document.write ("该 去 晨 运 了 !!!") 
if (hr==6) 
document.write ("你 知道 吗 , 此 时 是 
if (hr==7) 

document .write ("新 的 一 天 又 开始 了 , 祝 你 过 得 快乐 !") 
if ((hr--8) || (hr==9) II (hr--10)) 

document .write(" 上 午 好 ! 今 天 你 看 上 去 好 精神 哦 !") 
if (hr--11) 

document .write(" 十 一 点 过 了 , 快 下 班 了 吧 ? ") 

if (hr--12) 

document .write(" 十 二 点 过 了 ,还 不 下 班 ?") 

if ((hr--13) || (hr--14)) 

document .write(" 你 不 睡 午觉 ?2") 

if ((hr--15) || (hr==16) || (hr--17)) 
document.write ("FF # !") 

if ((hr-—-18) || (hr--19)) 

document .write(" 吃 晚饭 了 了 吧 ?") 





网 络 速度 最 快 的 时 候 !”) 
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if ((hr--20) || (hr--21) II (hr--22)) 
document .write(" 今 晚 又 在 这 玩 电脑 了 , 没 节目 ?") 
if (hr==23) 

document .write(" 真 是 越 玩 越 精神 ,不 打算 睡 了 ?") 
if (hr==0) 

document.write ("凌晨 了 ,还 不 睡 ?") 
document.write ("< /font>< /center>") 

/1/---> 

</SCRIPT> 

</p> 

<hr> 

<hr> 

<p align="center"><a href= "javascript :window.close()"><br> 
关闭 窗口 < /a>< /p> 

</body> 

</html> 


5.5 JavaScript+DIV+CSS 结合 





在 Web 应 用 中 ,可 以 使 用 JavaScript 十 DIV 十 CSS 结合 实现 下 拉 菜 单 , 下 拉 菜 单 在 网 
页 中 使 用 很 普遍 ,在 学 习 了 JavaScript 和 CSS 以 后 实现 将 毫 无 难度 。 其 原理 是 用 
JavaScript 控制 不 同 DIV 的 显示 和 隐藏 ,其 中 所 有 DIV 都 是 用 CSS 定位 方法 提前 定义 好 
位 置 和 表现 形式 ,下 拉 的 效果 是 当 鼠 标 经 过 的 时 候 触发 一 个 事件 ,把 对 应 的 DIV 内 容 显 
示 出 来 而 已 。 下 面 例 5-7 中 将 实现 一 个 简单 的 下 拉 菜单 。 

例 5-7 下 拉 菜 单 示例 。 


<html> 
<head> 
<title> 下 拉 菜 单 示例 < /title> 
<script language= "javascript"> 
// 当 鼠标 移 到 菜单 选项 的 时 候 显示 对 应 的 DIV 
function show (menu) 
f 
document .getElementById (menu) .style.visibility- "visible"; 
i 
// 当 鼠标 移出 的 时 候 隐藏 所 有 的 DIV 
function hide () 
{ 
document .getElementByld ("menul") .style.visibility- "hidden"; 
document .getElementById ("menu2") .style.visibility- "hidden"; 
document .getElementById ("menu3") .style.visibility- "hidden"; 
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</script> 
< /head» 
<body> 
<table> 
<tr bgcolor- "# 9999FF"> 
<td width="80" onMouseMove="show ("menu") " onMouseOut= "hide () "» 3E i —< /ta» 
«td width- "80" onMouseMove= "show (*menu2")" onMouseOut= "hide ()"> 菜 单 二 </td> 
«td width= "80" onMouseMove= "show ('menu3')" onMouseOut= "hide ()"> 菜 单 三 </td> 
</tr> 
</table> 
<div id= "menul" onMouseMove- "show ('menul')" onMouseOut- "hide ()" style= "background: 
# 9999FF;position:absolute;left- 12;top- 38;width- 80; visibility- hidden"? 
<span> 子 菜单 一 < /span> <br> 
<span> 子 菜单 二 < /span><br> 
<span> 子 菜单 三 < /span><br> 
</div> 
<div id= "menu2" onMouseMove- "show ('menu2') " onMouseOut- "hide ()" style= "background: 
# 9999FF;position:absolute;left- 95;top- 38;width- 80; visibility=hidden"> 
<span> 子 菜单 一 < /span» « br» 
<span> 子 菜单 二 < /span><br> 
< span» FHM =< /span><br> 
</div> 
<div id= "menu3" onMouseMove- "show ( 'menu3') " onMouseOut= "hide () " style= "background: # 
9999FF;position:absolute;left- 180;top- 38;width- 80; visibility=hidden"> 
<span> 子 菜单 一 < /span» « br» 
<span> 子 菜单 二 </span><br> 
<span> 子 菜单 三 < /span><br> 
</div> 
</body> 
</html> 


运行 效果 如 图 5-16 所 示 。 


D FERRARA 








图 5-16 下 拉 菜 单程 序 运行 效果 


第 5 章 JavaScript 


5.6 案例 实践 


5.6.1 案例 需求 说 明 
设计 图 5-17 所 示 的 表单 。 
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5-17 用 户 注册 表单 


在 表单 中 使 用 JavaScript 验证 表单 中 各 个 控件 的 输入 ,主要 保证 : 
(1)“ 注 册 账 号 ”“ 账 号 密码 ”“ 确 认 密 码 ” 非 空 ; 

(2)“ 账 号 密码 ”和 “确认 密码 "一致; 

(3)“ 账 号 密码 ”位 数 为 6 一 20 位 。 


5.6.2 技能 训练 要 点 


本 案例 主要 让 读者 自己 实现 页 面 验证 效果 ,学 会 如 何 书写 JavaScript 程序 ,了 解 各 元 
素 的 功能 和 实现 方法 :并 学 会 如 何 使 用 JavaScript 程序 验证 网 页 的 常用 控件 。 


5.6.3 案例 实现 


需要 在 一 head 盖 … 王 /head 盖 标记 中 插入 客户 端 验证 代码 ,另外 ,JavaScript 区 分 大 
小 写 ,在 案例 实现 过 程 中 需 格 外 注意 ,编写 JavaScript 代码 如 下 : 


<script language= "javascript"> 
function check() 
if (document.forml.zczh.value--"") 
1 
window.alert ("请 输入 注册 账号 "); 


document . forml .zczh.value=""; 
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document .forml.zczh.focus () 7 
return false; 
} 
if (document . forml .zhmml .value=="") 
{ 
window.alert ("请 输入 账号 密码 ") ; 
document.forml.zhmml.value- ""; 
document . forml .zhmml . focus () ; 
return false; 
} 
if (document . forml .zhmm2.value=="") 
{ 
window.alert (" 请 输入 确认 密码 ")， 
document . forml.zhmm2.value=""; 
document . forml . zhmm2 . focus () ; 
return false; 
} 
if (document .forml.zhmml.value!- document . forml . zhmm2 .value) 
f 
window.alert ("两 次 密码 不 一 致 ,请 重新 输入 "); 
document .forml.zhmml.value- "" 
document.forml.zhmm?.value- ""; 
document .forml.zhmml.focus(); 
return false; 








} 
if (document . forml .zhmml .value.length< 6| | document.forml.zhmml.value .length> 20) 
{ 
window.alert ("密码 长 度 范围 必须 在 6 和 20 Z [i] ") ; 
document . forml.zhmml.value=""; 
document . form1.zhmm2.value=""; 
document . forml .zhmml . focus () ; 
return false; 
} 
return true; 


} 
</script> 


界面 各 控件 的 设计 读者 可 以 自行 实现 。 


本 章 首先 介绍 了 JavaScript 的 概念 ,了解 了 JavaScript 的 历史 、 特 点 .引入 方式 及 基 
本 应 用 等 ;然后 介绍 了 JavaScript 入 门 的 基础 知识 ,包括 基本 语法 及 函数 .对 象 等 相关 知 
识 。 通 过 本 章 的 学 习 , 读 者 应 该 能 够 简单 地 认识 JavaScript 语言 的 语法 及 作用 ,熟练 掌握 
在 HTML 文档 中 引入 JavaScript 代码 的 方法 ,并 能 够 熟练 编写 JavaScript 程序 。 
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一 、 选 择 题 
1. 在 HTML 页 面 中 使 用 外 部 JavaScript 文件 的 正确 语法 是 ( 
A. 二 language 王 "JavaScript"src 一 "scriptfile. js" > 
B. <script language= "JavaScript"src= "scriptfile. js" ></script> 
C. <script language 王 "JavaScript" 王 Scriptfile. js ></script> 
D. <language src= "scriptfile. js" > 
2. 将 JavaScript 代码 嵌入 HTML 文档 ,可 使 用 的 HTML 标记 是 ( Ve 


A. <P> </P> B. <A> </A> 
C. <HTML> </HTML> D. <script> </script> 
& WFC ) 不 是 JavaScript 的 全 局 函数 。 
A. escape B. parseFloat C. eval D. alert 


4. 分 析 下 面 的 JavaScript 代码 段 : 


a=new Array (2,3,4,5,6) 7 sum- 0; 


for (i=1;i<a.length;i++) sumt-a[i]; 
document .write (sum); 
输出 结果 是 ( )。 
A. 20 B. 18 C. 14 D. 12 


5. 下列 JavaScript 语句 中 ,( ) 能 实现 单 击 按钮 时 弹出 消息 框 。 


A. <BUTTON VALUE =" RARI" onClick— alert "if ")></BUTTON> 
B. <INPUT TYPE="BUTTON" VALUE =" RR" onClick— alert ("x2") > 
C. <INPUT TYPE="BUTTON" VALUE =" fini fii" onChange=alert("W7E")> 
D. <BUTTON VALUE =" fit brid hii" onChange— alert "fj 2") ></BUTTON> 

二 、 填空 题 

1. window 对 象 的 open 方法 返回 的 是 e 

2. iS" setIntervalC"alertC welcome? ;",1000);” 的 意思 是 e 


3. 分 析 下 面 的 JavaScript 代码 段 : 


var a= 15.49; 
document .write (Math. round (a) ) 7 
输出 的 结果 是 


4. 分 析 下 面 的 JavaScript 代码 段 : 
a=new Array ("100","2111","41111") + 
for (var i-0;i«a.length;i ) 

{ 
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document .write(a[i] ""); 

H 

输出 结果 是 

5. 分 析 下 面 的 JavaScript 代码 段 : 

function employee (name, code) 

this.name- "Jerry"; 

this.code- "A001"; 

) 

newemp- new employee ("Mary", 'A002') ; 

document .write ("雇员 姓名 :"+newemp.namet+ "<br> ") ; 

document .write(" 雇 员 代号 :"+newemp.code+ "< br> ") ; 

输出 的 结果 是 " 

三 、 简 答题 

1. 什么 是 JavaScript? 

2. 简 述 JavaScript 与 Java 的 区 别 。 

3. 什么 是 脚本 语言 ? 根据 它 运 行 的 位 置 可 分 为 哪 两 种 脚本 ? JavaScript 具有 哪些 
特点 ? 

4. 应 用 JavaScript 如 何 打开 一 个 新 窗口 ? 

四 、 程 序 题 

1. 检查 用 户 输入 数据 合法 性 。 首 先 显 示 用 户 输入 电话 号 码 的 界面 ( 见 图 5-18), 当 用 户 
输入 了 号 码 并 单 击 “ 提 交 号 码 "按钮 后 ,将 执行 合法 性 检查 程序 , 若 用 户 输入 的 电话 号 码 值 不 
符合 要 求 (必须 是 数字 , 且 要 求 输入 的 数字 位 数 为 11 位 或 者 12 位 ), 则 给 出 出 错 提示 信息 
( 见 图 5-19) ,并 上 且 不 将 数据 提交 给 服务 器 ,如 果 是 正确 输入 则 弹出 号 码 提 交 成 功 的 对 话 框 
( 见 图 5-20) ,将 用 户 输入 的 电话 号 码 提交 给 服务 器 。 请 将 以 下 代码 补充 完整 。 
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图 5-18 输入 电话 号 码 的 界面 图 5-19 判断 提示 页 面 
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I AMRA - Microsoft Internet Explorer 
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5-20 ”提交 成 功 页 面 


<html> 

<head> 

<title> 页 面 示例 < /title> 
<script language= "javascript"> 


function Verify(){ 


} 


var Tel= i 
if (Tel.length==0) 
{ alert ("电话 号 码 不 能 为 空 ! 输 入 您 的 电话 号 码 !"); 


return false;} 


if( M 
NewWin- window.open ("", "", "width= 200,height- 200"); 
NewWin.document.open ("text/html"); 
NewWin.document .write ("<h3> 号 码 提交 成 功 !< /n3» ") 
NewWin.document .close () 7 
return true; 
} 
else{ 
alert(" 输 入 号 码 包含 非法 字符 ,请 输入 数字 号 码 !"); 
return false; } 
} 
else{ 
alert ("输入 的 电话 号 码 不 正确 !"); 


return false;] 


function validofPhone () 
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(  valid-true; 

for (var i=0;i< document .TelForm.Te1No.value.length; i++) 
{ var ch=document.TelForm.TelNo.value.charAt (i); 

if( } 

valid= false; 

if (!valid) 

break; 

} 
return valid; 


} 


</script> 

</head> 

<body> 

请 输入 您 的 电话 号 码 :<br> 

< form name= "TelForm" onSubmit=" > 


<input type="text" name- "TelNo" value="" /><br /> 
«input type="submit" value= "提交 号 码 " width- "100" /> 
«input type- "reset" value= " 重 置 号 码 " width= "100" /> 
«/form» 

</body> 

</html> 


2. 编写 图 5-21 所 示 新 用 户 注册 页 面 ,使 用 JavaScript 对 该 页 面 进行 验证 ,要 求 : 
CD. 用 户 名 和 密码 不 能 为 空 ,为 空 时 给 出 相应 提示 。 

(2) 用 户 确认 密码 不 能 为 空 且 两 次 输入 应 相同 ,否则 应 给 出 提示 。 

(3) 电子 邮箱 地 址 格式 要 正确 ,否则 应 给 出 “非法 E-mail 地 址 1” 的 提示 。 








外 新 用 户 注册 - Microsoft Internet Explo 


















































































RAG) REE BEM KRA) TAC) 
O=- O- BAG Lay 
jt 0) (E) c: Documents and Settings\Adninistrator] 
新 用 户 注册 

用 户 名 (+): 

= Be): 

再 输 一 次 密码 (*)， 

性 别 ，@ 男 EO 女 

出 生年 月 ， 年 |1 wA 日 
电子 邮箱 G): 

家 庭 住 址 ; 

(Exj( sss ) 








图 5-21 新 用 户 注册 页 面 
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6.1 Web 开发 概述 





Web 页 通常 称 为 网 页 ,其 中 包含 相关 的 文本 、 图 像 . 声 音 、 动 画 、 视 频 以 及 脚本 命令 
等 ,位 于 特定 计算 机 的 特定 目录 中 ,其 位 置 可 以 根据 URL 确定 。Web 程序 是 使 用 HTTP 
作为 核心 通信 协议 ,并 使 用 HTML 语言 向 用 户 传递 信息 的 应 用 程序 。 一 个 Web 应 用 程 
序 实质 上 就 是 一 组 静态 网 页 和 动态 网 页 的 集合 ,在 这 些 网 页 之 间 可 以 相互 传递 信息 ,还 可 
以 通过 这 些 网 页 对 Web 服务 器 上 的 资源 进行 存 取 。 

一 般 的 Web 站 点 由 一 组 相关 的 HTML 文件 和 其 他 文件 组 成 ,这 些 文件 存储 在 Web 
服务 器 上 。 从 技术 层面 看 ,Web 架构 的 精华 有 三 处 : 用 超 文 本 技术 (HTML) 实 现 信 息 与 
信息 的 连接 ;用 统一 资源 定位 技术 (URL) 实 现 全 球 信息 的 精确 定位 ;用 新 的 应 用 层 协 议 
CHTTP) 实 现 分 布 式 的 信息 共享 。 这 三 个 特点 无 一 不 与 信息 的 分 发 .获取 和 利用 有 关 。 
其 实 , Web 是 一 个 抽象 的 (假想 的 ) 信 息 空 间 。 也 就 是 说 ,作为 Internet. 上 的 一 种 应 用 架 
构 , Web 的 首要 任务 就 是 向 人 们 提供 信息 和 信息 服务 。 

按照 Web 服务 器 响应 方式 的 不 同 , Web 页 面 可 以 分 为 静态 Web 页 面 和 动态 Web 
页 面 。 





6.1.1 静态 Web 页 面 


静态 Web 页 面 的 后 级 名 多 为 . html、. htm, 浏 览 器 向 服务 器 请 求 页 面 时 可 以 直接 读 
取 页 面 内 容 , 读 取 到 的 内 容 通过 网 络 服务 器 直接 返回 给 用 户 。 

在 静态 Web 程序 中 ,客户 端 使 用 Web 浏览 器 (IE、360 浏览 器 等 ) ,经 过 网 络 连接 到 
服务 器 端 上 , 然后 使 用 HTTP 协议 通过 网 络 向 服务 器 端 发 送 一 个 HTTP 请 求 
(Request) ,告诉 服务 器 需要 哪个 页 面 ,所 有 请 求 交 给 Web 服务 器 处 理 ; Web 服务 器 根据 
用 户 的 需求 ,从 文件 系统 中 (存放 了 所 有 静态 页 面 的 磁盘 ) 取 出 内 容 , 通 过 Web 服务 器 返 
回 给 客户 端 (Response) ,客户 端 接收 到 内 容 后 经 过 浏览 器 解析 ,显示 出 效果 来 。 工 作 流 
程 如 图 6-1 所 示 。 

为 了 让 静态 的 页 面 显示 得 更 好 看 些 , 还 可 以 采取 诸如 JavaScript 和 VBScript 的 技 
术 ， Pell ae, 但 是 ,这 些 特效 都 是 在 客户 端 借助 浏览 器 (浏览 器 解释 
JavaScript 和 VBScript 代码 ) 实 现 的 ,在 服务 器 端 没有 任何 变化 。 
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客户 机 网 络 服务 器 
HTTP 请 求 
浏览 器 上 一 | Web 服 务 器 
HTTP 响 应 d 
静态 页 面 




















6-1 静态 Web 工作 流程 图 


静态 Web 页 面 存在 以 下 重要 的 问题 ; 

(1) 所 有 用 户 看 到 的 页 面 效 果 是 一 样 的 ,因为 服务 器 向 所 有 用 户 提供 的 内 容 都 是 一 
样 的 。 

(2) 在 静态 Web 技术 中 ,一 个 重要 的 缺点 是 静态 Web 页 面 无 法 访问 数据 库 资源 ,而 
现在 用 数据 库 保 存 数据 又 是 绝 大 多 数 系统 的 选择 ,因为 使 用 数据 库 可 以 很 方便 地 管理 数 
据 , 进 行 数据 的 CDUR 操作 (增加 (Creat)、 W BR (Delete), Œ $i (Update), 查询 
(Requery) ) 。 


6.1.2 动态 Web 页 面 


动态 Web 页 面 中 的 “动态 ”不 是 指 页 面 的 显示 效果 会 动 或 者 外 观 花哨 ,而 是 指 这 样 一 
种 特性 :“ 客 户 端 请 求 的 页 面 内 容 及 显示 效果 会 因 时 因 人 而 变 ”, 页 面具 有 交互 性 。 另 外 ， 
动态 页 面 支持 数据 库 ,这 一 点 是 非常 重要 的 。 

其 工作 原理 是 : 首先 客户 端 发 送 请 求 给 服务 器 端 ,所 有 的 请 求 都 交 给 了 Web Server 
Plugin( Web 服务 器 插件 ) ,此 插件 用 来 区 分 到 来 的 请 求 是 静态 页 面 请 求 还 是 动态 页 面 请 
求 。 如 果 到 来 的 是 一 个 静态 页 面 请 求 ( * . html 等 ), 上 述 插件 会 将 所 有 请 求 都 交 给 Web 
服务 器 ,之 后 , Web 服务 器 会 从 文件 系统 中 取出 内 容 , 返 回 给 客户 端 。 如 果 到 来 的 请 求 是 
动态 请 求 (. jsp、. asp.. php 等 ), 则 上 述 插件 会 将 所 有 的 请 求 都 转交 给 Web Container 
(Web 容器 ) ,在 Web Container 中 “动态 ”地 执行 代码 .全 部 执行 完 代码 后 ,将 生成 的 代码 
结果 返回 Web 服务 器 ,Web 服务 器 将 代码 结果 和 相关 资源 整合 成 一 个 独特 的 网 页 后 ,将 
其 返回 客户 端 。 工 作 流程 如 图 6-2 所 示 。 





























Web 浏 览 器 Web 服 务 器 。 服务 器 端 应 用 
HTTP 请 求 
网 页 

















图 6-2 动态 Web 工作 流程 图 


本 书 中 主要 使 用 ISP 技术 开发 动态 页 面 。 
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6.2 JSP i jr 


在 网 页 程序 中 加 入 Java 程序 片段 和 ISP 标记 就 构成 了 一 个 JSP 页 面 程序 。JSP 页 
面 程序 文件 必须 以 .jsp 为 扩展 名 。 一 个 JSP 页 面 程序 可 由 5 种 元 素 组 合 而 成 : 分 别 是 
HTML 标记 (包括 JavaScript HAS) Java 脚本 、JSP 指令 、JSP 动作 标记 和 注释 。 为 了 简 
化 页 面 元 素 ,JSP 还 定义 了 一 些 可 以 直接 使 用 的 内 置 (预定 义 ) 对 象 。 当 Web 服务 器 上 的 
一 个 JSP 页 面 文件 第 一 次 被 请 求 执行 时 ,服务 器 上 的 ISP 引擎 编译 该 文件 并 执行 : 

COD 把 页 面 中 的 HTML 文本 (包括 JavaScript 脚本 ) 发 送 到 用 户 浏览 器 ; 

(2) Java 脚本 、JSP 指令 、JSP 动作 在 服务 器 端 执行 ,将 需要 显示 的 结果 随同 HTML 
文本 发 送 到 用 户 浏 览 器 。 

JSP(Java Server Pages) 是 由 原 Sun 公司 ( 现 已 被 合并 ) 倡 导 、 许 多 公司 参与 ,于 1999 
年 推出 的 一 种 动态 网 页 技术 标准 。JSP 是 基于 Java Servlet 及 整个 Java 体系 的 动态 Web 
页 面 开发 技术 ,利用 这 一 技术 可 以 建立 安全 、 跨 平台 的 先进 动态 网 站 。 

需要 强调 的 一 点 是 : 要 想 真正 地 掌握 ISP 技术 ,必须 有 和 较 好 的 Java 语言 基础 及 
HTML 语言 方面 的 知识 。 


6.3 JSP 开发 环境 安装 与 配置 





6.3.1 JDK 的 下 载 ,安装 及 环境 变量 配置 


1. JDK 的 下 载 和 安装 

打开 http: //download. java. net/jdk 站 点 ,下 载 Windows 平台 的 JDK 安装 程序 。 
下 载 后 ,安装 步骤 如 下 : 

(1) 双击 JDK 安装 程序 ,出 现 图 6-3 所 示 的 欢迎 使 用 Java 对 话 框 。 


个 JavaCrm) SE Development Kit 6 Update 21 — We 


G 





java’ 


欢迎 使 用 Java(TM) SE Development Kit 6 Update 21 安装 向 导 


此 向 导 格 引导 您 完成 Java SE Development Kit 6 Update 21 的 安装 过 程 。 





LT—Z»j mut | 
图 6-3 欢迎 使 用 Java 对 话 框 
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(2) 单 击 “ 下 一 步 ” 按 钮 ,出 现 图 6-4 所 示 的 “ 自 定义 安装 ”对 话 框 。 





64 “ 自 定义 安装 "对 话 框 


(3) 单 击 “ 下 一 步 " 按 钮 ,将 IDK 安装 到 “D:\Java\jdk16\" 文 件 夹 下 。 在 “ 自 定义 安 
装 ” 对 话 框 , 单 击 “ 更 改 ” 按 钮 .出现 “更 改 当 前 目标 文件 夹 ” 对 话 框 ,在 “文件 夹 名 称 ” 文 本 框 
中 输入 “*D:\Java\jdk16\”, 如 图 6-5 所 示 。 





图 6-5 “更 改 当 前 目标 文件 夹 "对 话 框 


(4) 单 击 “ 确 定 ?按钮 .返回 图 6-6 所 示 的 “ 自 定义 安装 ”对 话 框 。 

请 记 住 JDK 安装 的 文件 夹 一 一 D:\Java\jdk16, 后 面 在 定义 Windows 环境 变量 时 要 
用 到 它 。 

(5) 单 击 “ 下 一 步 "按钮 ,安装 程序 自动 安装 JDK ,直到 结束 。 

2. Java 环境 变量 配置 

配置 Java 环境 变量 的 目的 是 ,告诉 操作 系统 在 运行 Java 程序 时 与 之 相关 的 文件 和 
文件 夹 。 例 如 ,系统 在 编译 Java 程序 时 . 它 需 要 知道 到 哪个 或 哪些 文件 夹 下 去 寻找 Java 
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图 6-6 “ 自 定义 安装 ”对 话 框 


编译 程序 。 又 如 ,Java 程序 要 引入 相关 的 类 库 包 , 编 译 程序 要 知道 到 哪儿 去 寻找 这 些 类 
库 包 。 这 些 都 是 在 环境 变量 中 定义 的 。 与 Java 相关 的 环境 变量 有 三 个 : classpath、path 
和 java_home。classpath 和 path 在 编译 和 执行 Java 时 要 用 到 。java_home 是 下 面 介绍 
的 Web 服务 器 要 用 到 的 。 在 此 一 并 定义 ,操作 步骤 如 下 : 

CD 右 击 “我 的 电脑 "后 ,选择 “属性 ”命令 ,出 现 图 6-7 所 示 的 “系统 属性 一 常规 ”对 
话 框 。 

(2) 在 “系统 属性 一 常规 "对话 框 单 击 “ 高 级 "标记 ,出 现 图 6-8 所 示 的 “系统 属性 一 高 
级 "选项 卡 。 





图 6-7 “系统 属性 一 常规 "对 话 框 图 6-8 “系统 属性 一 高 级 ”选项 卡 
G) 单 击 “ 环 境 变 量 " 按 钮 ,出 现 图 6-9 所 示 的 “环境 变量 ”对话 框 。 
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(4) 单 击 “ 系 统 变 量 " 列 表 框 下 的 “新 建 " 按 钮 ,出 现 “新 建 系统 变量 ”对 话 框 ,如 图 6-10 
所 示 。 在 “变量 名 ”文本 框 中 输入 classpath, 在 “变量 值 "文本 框 中 输入 “. ;d:\Java\jdk16\ 
lib\tools. jar;d:\Java\jdk16\lib\dt. jar”。 单 击 “ 确 定 ” 按 钮 ,返回 “环境 变量 "对话 框 。 在 
“系统 变量 ?列表 框 内 会 看 到 新 建 的 环境 变量 classpath 及 其 值 。 


环境 变量 


| [ 
THF cal Settings \Teap 





图 6-9 “环境 变量 ”对话 杠 图 6-10 “新 建 系统 变量 "对话 框 


O 重复 第 (4) 步 ,再 新 建 一 个 环境 变量 ,变量 名 为 java_home. 值 为 d:\Java\jdk16。 
(6) 在 “环境 变量 ”对 话 框 的 “系统 变量 ”列表 框 内 ,选中 环境 变量 Path 选项 ,如 
6-11 所 示 。 单 击 “ 编 辑 ” 按 钮 .出 现 “编辑 系统 变量 ”对话 框 ,如 图 6-12 所 示 。 





图 6-11 选中 环境 变量 Path 选项 图 6-12 “编辑 系统 变量 "对话 框 


CD 在 编辑 环境 变量 Path 的 对 话 框 中 的 “变量 值 ” 文 本 框 输 入 “*. ;d:\Java\jdk16\ 
bin;”, 如 图 6-12 所 示 , 单 击 “ 确 定 ” 按 钮 ,返回 “环境 变量 ”对 话 框 ,再 单 击 “确定 ”按钮 , 返 
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回 “ 系 统 属性 ”对 话 框 ,最 后 单 击 “ 确 定 ” 按 钮 , 则 三 个 环境 变量 建立 完毕 。 

三 个 环境 变量 的 值 中 都 用 到 了 字 串 “d:\Java\jdk16”, 这 就 是 JDK 的 安装 文件 夹 。 用 
户 可 以 将 JDK 安装 在 其 他 文件 夹 ,但 要 切记 ,对 三 个 环境 变量 cla 
home 值 中 的 定义 要 与 之 一 致 。 否 则 ,JDK 和 Web 服务 器 不 能 正确 运行 。 


sspath path 和 java_ 





6.3.2 Tomcat 安装 


有 了 Java 的 编译 环境 ,还 需要 安装 一 个 Web 服务 器 。 这 里 安装 一 个 小 型 的 免费 服 
务 器 Tomcat, 在 安装 Tomcat 之 前 最 好 要 配置 一 个 环境 变量 java_home', 它 的 值 是 多 少 
Wee 就 是 你 安装 JDK 的 根 目 录 。 例 如 D:\Java。 然 后 双击 Tomcat 的 安装 图 标 ,显示 
图 6-13 所 示 的 安装 主页 面 。 





El Apache Tomcat Setup 





Welcome to the Apache Tomcat 
Setup Wizard 









This wizard will guide you through the installation of Apache 
Tomcat. 


Tt is recommended that you close all other applications 
before starting Setup. This wil make it possible to update 
relevant system files without having to reboot your 
computer. 


Click Next to continue. 


me Apache Jakarta Project 





图 6-13 安装 主页 面 


选择 默认 值 , 单 击 Next 按钮 ,进入 选择 路 径 页 面 , 如 图 6-14 所 示 。 
M Apache Tomcat Setup Pale es] 


Choose Install Location 
Choose the folder in which to install Apache Tomcat. 


‘Setup will install Apache Tomcat in the Following Folder, Oe ee A dick. 
Browse and select another Folder. Click Next to continue, 











= 








‘Space required: 16.0MB 
‘Space available: 2.268 





Nalsaf Install System v2.34 


[Exi 
图 6-14 选择 路 径 页 面 
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此 处 可 以 更 改 安装 路 径 ,务必 记 住 更 改 的 路 径 。 选 择 路 径 后 单 击 Next 按钮 ,进入 端 
口号 及 用 户 密码 页 面 ,如 图 6-15 所 示 。 





图 6-15 端口 号 及 用 户 名 密码 页 面 


此 处 可 以 修改 Tomcat 服务 器 的 运行 端口 号 ,默认 是 8080,User Name 与 Password 
是 Tomcat 服务 器 的 控制 后 台 设置 。 单 击 Next 按钮 .进入 JRE 路 径 页 面 ,如 图 6-16 
所 示 。 





6-16 JRE 路 径 


前 面 配 置 好 的 java_home 的 值 ,在 这 里 可 以 体现 出 来 。 最 后 单 击 Finish 按钮 完成 安 
装 ,如 图 6-17 所 示 。 

完成 安装 后 ,就 可 以 在 “开始 ”程序 "中 找到 已 经 安装 好 的 Tomcat. 如 图 6-18 
所 示 。 

如 果 要 启动 Tomcat 服务 器 ,可 以 单 击 图 6-18 的 Apache Tomcat > Configure 
Tomcat 命令 ,会 显示 图 6-19 所 示 的 页 面 。 
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司 可 可 


Completing the Apache Tomcat 
Setup Wizard 


Apache Tomcat has been installed on your computer. 
Click Finish to dose this wizard. 
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图 6-17 安装 完成 


(C) Microsoft Developer Network 






C) SQL Control Center 
C) MER 
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(C) Toncat Progran Directory 
E Toorat Home Page 
dE] Toncat Manager 
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图 6-18 所 有 程序 列表 


IE ~ 


General |Loz On| Lozzinz| Java | Startup | Shutdown | 


‘Service Name: 
Display name: 
Description: 


TomcatS 


apache Tomcat Server - http:/ftomcat. apache 


Path to executable: 


FE program Fies\Apache Software Foundation\Tomcat 5 Sibnitomcat5. 








[we ] x | sew | 


图 6-19 Configure Tomcat 页 面 
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然后 再 单 击 Start 按钮 ,就 可 以 启动 Tomcat 了 。 第 二 种 启动 Tomcat 服务 器 的 方法 
是 ,找到 安装 Tomcat 服务 器 的 目录 ,例如 C:\Program Files \ Apache Software 
Foundation\Tomecat ,在 bin 文件 夹 下 双击 tomcat. exe. 同样 可 以 启动 Tomcat 服务 器 。 
如 图 6-20 所 示 。 


o) 8G) BEM Ra) IRT) WW 
Qa- O $ Pe xe 国 - 


bL) EDC \rrogran Ti1esupuche Sort 








I Teens 8.0 





图 6-20 Tomcat 服务 器 的 目录 bin 文件 夹 


通常 为 了 方便 ,可 以 对 tomcat. exe 文件 创建 桌面 快捷 方式 。 运 行 Tomcat 服务 器 后 ， 
在 IE 地 址 栏 里 输入 http: //localhost: 8080 或 http: //127.0.0. 1; 8080 ,出 现 图 6-21 所 
示 的 界面 ,表明 Tomcat 服务 器 安装 成 功 。 


- y Ora Pr 
Apache Tomcat 
PA the Apache Software Foundation 
http: //www.apache.org/ 


|Adminstration | Ifyou'te seeing this page via e web browser, It means you've setup Tomcat successfully. 








Congratulations 

| Stanis 

Tomcat Admiasiraton As you may have guessed by now, Ihis is the defaut Tomcat home page can be found on the local 
[Tomcat Manager lesystem at 











as compiledinto a 
‘twas mapped ) 









NOTE: Ths page is 
servi at buld ura. 
|Home Page 


NOTE: For security reasons, using the administration webapp is restricted to users with role 











| Bua Detaoese "admin". The manager webapp is restricted to users with role "manager". Users are defined in 
eoruin immi 
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图 6-21 Tomcat 测试 页 面 


Tomcat 服务 器 的 文件 夹 目录 结构 如 图 6-22 所 示 。 

其 中 ,bin 目录 存放 启动 和 关闭 Tomcat 服务 器 的 可 执行 文件 。common/lib 目录 存 
放 所 有 需要 的 *. jar 包 。conf 目录 包含 不 同 的 配置 文件 , server. xml 里 面 可 以 修改 
Tomcat 服务 器 一 些 配 置信 息 , 例 如 端口 、 虚 拟 目 录 。 必 务 记 住 ,修改 完成 后 ,必须 重新 启 
动 计 算 机 。logs HRA Tomcat 服务 器 的 日 志文 件 。server 目录 存放 客户 的 服务 器 文 
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文件 四 SED FEV EQ IAM Bho 








[st] tomcat. ico 22 ke 图 标 


国 winstall exe 64 KB Application 





6-22 Tomcat 服务 器 的 文件 夹 目录 结构 


件 。webapps 目录 存放 网 站 应 用 程序 ,以 后 要 部 署 的 应 用 程序 也 要 放 在 此 目录 里 面 。 
配置 虚拟 目录 的 方法 是 在 Tomcat/conf/server. xml 打开 后 ,在 二 /host 二 上 方 加 入 
下 列 代码 : 


«Context. path="/ 虚 拟 目录 名 " docBase=" 是 你 的 网 站 目录 的 绝对 路 径 " reloadable="true" /> 
例如 : 
http://localhost:8888/jxau/Test.jsp 


注意 : 如 果 在 访问 页 面 出 现 404 错误 ,说 明文 件 没有 找到 ,应 检查 访问 的 路 径 ; 如 果 
出 现 的 是 500 错误 , 则 说 明 服务 器 程序 脚本 有 问题 。 


6.4 JSP 页 面 开发 与 运行 





6.4.1 JSP 页 面 的 基本 结构 


在 传统 的 HTML 页 面 文件 中 加 入 Java 程序 片 和 JSP 标记 就 构成 了 一 个 JSP 页 面 文 
TF ,简单 地 说 ,一 个 JSP 页 面 除 了 普通 的 HTML 标记 符 外 ,再 使 用 标记 符号 志 %% > Jm 
入 Java 程序 片 。 一 个 JSP 页 面 文件 的 扩展 名 是 . jsp, 文 件 的 名 字 必 须 符合 标识 符 规定 ， 
需要 注意 的 是 ,JSP 技术 基于 Java 语言 ,名 字 区 分 大 小 写 。 

为 了 明显 地 区 分 普通 的 HTML 标记 和 Java 程序 片段 以 及 JSP 标记 ,用 大 写字 母 书 
写 普 通 的 HTML 标记 符号 。 下 面 的 例子 是 一 个 简单 的 JSP 页 面 。 

例 6-1 一 个 统计 客户 访问 量 的 页 面 。 

<%@page language- "java" pageEncoding- "GB2312" $» 

«$6 page contentType- "text/html;charset-GB2312" %> 

<HTML> 

< !DOCTYPE HTML PUBLIC "- //w3c//dtd html 4.0 transitional//en"> 


<head> 
<title> 声 明 变 量 < /title> 
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</head> 

<BODY> < FONT size=5> 

«Sitt; 要 > 

<P> 您 是 第 <$=i%> 个 访问 本 站 的 客户 。< /p> 
<%!int i-0; $5 

« /BODY» 

</HTML> 


6.4.2 JSP 页 面 的 运行 过 程 


JSP 页 面 运行 步骤 如 下 : 
首先 建立 目标 文件 夹 , 用 来 存放 项 目 , 如 图 6-23 所 示 。 


XM MG 340 HRY TAD BHO 
Qa- © i$ Px (xn m 


batt @) for 


SACP RES, a) 
w) ResitrhA 


dy Sere 
O xit tx 

[] Fine 
iQ BR 

RE ae 


X ITERA 








图 6-23 目标 文件 夹 


然后 解压 用 来 开发 Java EE 应 用 的 Eclipse 软件 ,这 是 一 个 绿色 软件 ,解压 以 后 即 可 
使 用 ,如 图 6-24 所 示 。 











图 6-24 解压 Eclipse 软件 


第 6 章 ”动态 Web 开 发 


双击 应 用 程序 图 标 ,选中 目标 文件 夹 作为 工作 区 间 , 如 图 6-25 所 示 。 


œ eclipse 











itii Select a workspace 


Eclipse Flatfore stores your projects in a folder called a workspace. 
Choose a workspace folder to use for this session 





















o macas 


Yekgee onz sere 


(se this as the default and do not ask again 








6-25 选中 工作 区 间 


单 击 OK 按钮 继续 , 单 击 File Project 菜单 项 ,如 图 6-26 所 示 。 


Open File, 


[An outline is not available, 


Anane. n 
Refresh E 
Convert Lina Diliniters To » 


Snitch Workspace > 
ba Inport. 
tå bmart 


Properties ALt+Enter 





hit 











(i Probleme S G Taska | E Properties] Hh Servers |I Date Soares Expl erar | [5 Snippets] FICA 
O errors, 0 warnings O inten 


图 6-26 ”项目 选项 页 面 














在 打开 的 New Project 对 话 框 中 , 单 击 Web 下 的 Dynamic Web Project Jii H ,新 建 一 
个 动态 的 Web 项 目 ,如 图 6-27 所 示 。 

单 击 Next 按钮 ,进入 New Dynamic Web Project 对 话 框 。 单 击 New 按钮 ,打开 
New Server Runtime 对 话 框 ,选择 服务 器 ,如 图 6-28 所 示 。 

进一步 选择 服务 器 的 位 置 ,一 般 为 C:\Program Files\Apache Software Foundation\ 
Tomcat 6.0, 如 图 6-29 所 示 。 

单 击 “ 确 定 ” 按 钮 ,一 直 单 击 Next 按钮 .最 后 单 击 Finish 按钮 ,工程 建立 完毕 ,如 图 6-30 
所 示 。 
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Rew Project 


Select a wizard 
Create a Dynamic Web project 


Wizards: 
type filter text 











& @ General 
ee cs 
8 CS Eclipse Modeling Franevork 
BS 
Qs see 
BS Java 
Qe JP 
8 G Plug-in Development 
Bete 
GE 
Gi Static Web Project 
BB Examples 




















Dynamic Web Project 


Create a standalone Dynamic Web project or add it to a new or existing Enterprise Application 


























Epsum 一 E 
Project contents 

E Use default 

Directory: [Etats Brows 
Target Runtime 

[fone> [nem 





Hew Server Runtime 




















New Server Runtime 


Define a new installed server runtime environment 


Runtimes are used at build time to compile projects, 


Select the runtime type 





type filter text 








B @ Apache 

B Apache Tomcat 19.2 
Apache Tomcat v4.0 
Apache Toweat v4.1 
Apache Teacat ¥5.0 
B Apache Tomcat 15.5 


> 





Cancel 














il 

















图 6-28 选择 服务 器 








Kew Server Runtime 


Tomcat Server 
Specify the installation directory 


Mone 
[Apache Tomcat v6.0 





Tomcat installation directory: 
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Select Toncat installation directory. 
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图 6-29 服务 器 位 置 


Java EE - Eclipse Platform 
Eile Edit Navigate Search Project Bun Window Help 
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Location 








6-30 工程 建立 示意 图 





143 


144 Web 项 目 开发 实践 教程 


fiii WebContent 选项 ,选择 New—JSP 命令 ,如 图 6-31 所 示 。 


© Java EE - Eclipse Platform 


File Edit Navigate Search Project Eun Window Help 


O-HG:%-o-a- iO 








SB lis outline is not available 


PS Java Resources: sre 


Li EL 
gra. 
C$ rade 
fu rie 








Moye. 
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peru Title 
Abert T Other. = = 
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ele? 
ele 


Resource Path Location 


Validate 
Bun As > 
Debug As , 
Profile As , 
Tam » 
Compare With , 
Restore from Local Kistory 

Source. , 








Properties 如 ttEnter 


图 6-31 新 建 JSP 页 面 





为 新 建 的 ISP 页 面 取 一 个 名 字 , 如 图 6-32 所 示 。 


É New JavaServer Page 


JavaServer Page 
Create a ner JavaServer Page. 


Enter or select the parent folder: 
aayWebContent 











© settings 
S- build 

@ sre 
E C» WebContent 











File nane: [sa 








Advanced > 

















图 6-32 ”页面 命名 
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单 击 Next 按钮 ,然后 单 击 Finish 按钮 ,就 可 以 在 代码 编辑 窗口 输入 相应 的 代码 了 ， 
如 图 6-33 所 示 。 


© Java EE - aa/¥ebContent/aa. jsp - Eclipse Platform 
File Edit Refactor Source Navigate Search Project Bun Window Help 


Hedd" ER Ad a Sd A-A ie O E B:eov:e@ 
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LEX e BR FONT sire=5 
BR Servers E 
您 是 第 <s-13> 个 访问 本 站 的 客户 。</Py> 


int i=0; $> 











D errors, 3 warnings, O infos 





Deceription 二 Raceurce Fath Leeation 
日 E Warnings G ites) 
@ Invalid Location of tag ÜCHL). as jsp ebcontent Line 4 
@ Invalid Location of tag (P) Line 10 
@ Jo end tag (UTOR) Line 12 











TEST 





6-33 ”代码 输入 窗口 


代码 输入 完毕 后 ,在 页 面 上 右 击 ,选择 Run As— Run on Server 命令 ,可 以 在 新 建 工 
程 时 指定 的 服务 器 上 运行 该 页 面 ,具体 效果 如 图 6-34 和 图 6-35 所 示 。 


jebContent/aa. jsp - Eclipse Platform 


Eile Edit Refactor Source Navigate Search Project Bun indov Help 


*-0-q- gu:G:u:gm:imo* 


SAB is 2 
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由 名 baile B a Bom 
Gir m" 


© jsp: directive page 1a) 


Delete 


rm ET 
pA NA a T »| 








audi He fb Servers |E Data Source Bestor | D Suigpets| I 
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Source 








Properties 


图 6-34 通过 右键 快捷 菜单 选择 服务 器 运行 
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Add and Remove projects 
Modify the projects that are configured on the server 








Configured projects: 


Go 








Location 


line 4 
B line 10 


CE tine 12 























图 6-35 运行 示意 图 
单 击 Finish 按钮 就 可 以 看 到 图 6-36 所 示 的 运行 结果 页 面 。 
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6.4.3 JSP 的 运行 原理 


当 服 务 器 上 的 JSP 页 面 被 第 一 次 请 求 执行 时 ,服务 器 上 的 ISP 引擎 首先 将 JSP 页 面 
文件 转译 成 一 个 Java 文件 ,再 将 这 个 Java 文件 编译 生成 字 节 码 文件 ,然后 通过 执行 字 节 
码 文件 响应 客户 的 请 求 , 而 当 这 个 JSP 页 面 再 次 被 请 求 执行 时 ,JSP 引擎 将 直接 执行 这 个 
字 节 码 文件 响应 客户 ,这 也 是 JSP 比 ASP 速度 快 的 一 个 原因 。 而 JSP 页 面 的 首次 执行 往 
往 由 服务 器 管理 者 执行 。 这 个 字 节 码 文件 的 主要 工作 是 : 

CD 把 JSP 页 面 中 普通 的 HTML 标记 符号 (页 面 的 静态 部 分 ) 交 给 客户 的 浏览 器 负 

COD 执行 二 % 和 % 二 之 间 的 Java 程序 片 (JSP 页 面 中 的 动态 部 分 ) ,并 把 执行 结果 交 
给 客户 的 浏览 器 显示 。 

(3) 当 多 个 客户 请 求 一 个 JSP 页面 时 ,JSP 引擎 为 每 个 客户 启动 一 个 线程 而 不 是 启 
动 一 个 进程 ,这 些 线程 由 JSP 引擎 服务 器 管理 ,与 传统 的 CGI 为 每 个 客户 启动 一 个 进程 
相 比较 , 效 率 高 得 多 。 


6.5 JSP 的 基本 语法 





JSP 是 一 种 容易 学 习 和 使 用 的 在 服务 器 端 编译 执行 的 Web 程序 设计 语言 ,其 脚本 语 
言 采 用 Java, 拥 有 Java 的 所 有 优点 。 通 过 JSP 能 使 网 页 的 动态 部 分 与 静态 部 分 有 效 分 
开 , 只 要 用 用 户 熟 悉 的 Dreamweaver 之 类 网 页 制作 工具 ,编写 普通 的 HTML ,然后 通过 
专门 的 标记 将 动态 部 分 包含 进来 就 可 以 。 

qi" — 4 OF RER) Rn A > CH Cb ie "包围 的 部 分 称 为 JSP 元 素 内 容 , 主 要 是 符 
合 Java 语法 的 Java 程序 ,这 些 内 容 由 JSP 引擎 解读 和 处 理 。 

JSP 元 素 可 分 成 脚本 元 素 、 指 令 元 素 与 动作 组 件 三 种 类 型 。 脚 本 元 素 规范 ISP 网 页 
所 使 用 的 Java 代码 ,指令 元 素 针 对 JSP 引擎 控制 转译 后 的 Servlet 的 整个 结构 ,而 动作 元 
素 主 要 连接 要 用 到 的 组 件 , 如 JavaBean 和 Plugin, 另 外 还 能 控制 JSP 引擎 的 行为 (参见 
K 6-1). 





表 6-1 JSP 基本 元 素 和 语法 

















元 素 类 型 JSP 元 素 语 法 解 释 
表达 式 dux 表达 式 经 过 运算 然后 输出 到 页 面 
程序 码 片段 HRE C 嵌入 Java 代码 
x 声明 <% RE > en 中 ,用 于 声明 变量 方法、 
素 B 
注释 —u-GkRB-W iid JSP 转译 成 Servlet 时 , 将 被 
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续 表 
元 素 类 型 JSP 元 素 语 法 解 释 
指 JSP 页 面 指令 <%@page 属性 名 一 “ 值 ?% 二 “| 在 载 人 时 提供 JSP 引擎 使 用 
令 
X |JSP 包 含 指令 | <%@include file= "url %> ea ee Servlet 之 后 被 包含 进来 





< jsp: include page 一 relative 


OR 当 页 面 得 到 请 求 时 ,所 包含 的 文件 


jsp: include 





<jsp: forward page= 


pe 将 页 面 得 到 的 请 求 转向 下 一 页 


jsp: forward 





KA + HA < jsp: include > 和 




















z " <jsp: param name 一 参数 名 称 ， | <jsp: forword> 一 起 使 用 ,可 以 将 
a | Pere value= fi. /> param 组 件 中 的 值 传递 到 include 和 
件 forword 动作 组 件 要 加 载 的 文件 中 

jsp: useBean <jsp: useBean-++/> 找到 并 建立 JavaBean WH 

jsp: setProperty | 一 jsp: setProperty… /二 设置 JavaBean 的 属性 

jsp: getProperty | 一 jsp: getProperty…/ 二 得 到 JavaBean 的 属性 


6.5.1 JSP 脚本 元 素 


1. 表达 式 

JSP 表达 式 的 结果 可 以 转换 成 字符 串 并 且 直 接 输出 到 网 页 上 。JSP 表达 式 是 属于 
二 % 三 表达 式 % 二 标记 里 不 包含 分 号 的 部 分 。 

2. 程序 码 片段 

JSP 程序 码 片 段 包 含 在 二 % 代 码 % 二 标记 里 。 当 Web 服务 器 接受 这 段 请 求 时 ,这 段 
Java 程序 码 会 执行 。 使 用 程序 码 片 段 可 以 在 原始 的 HTML 或 XML 内 部 建立 有 条 件 的 
执行 程序 码 , 或 者 方便 使 用 另 一 段 程序 码 。 

3. 声明 

JSP 声明 可 以 定义 网 页 层 的 变量 ,存储 信息 或 定义 函数 ,让 JSP 网 页 的 其 余部 分 能 够 
使 用 。 可 以 在 二 %! 声 明 % 二 标记 里 找到 声明 。 记 住 ,要 在 变量 声明 的 后 面 加 上 分 号 ,与 
有 效 的 Java 语句 的 形式 一 样 。 

4. 注释 

最 后 一 个 主要 的 ISP 脚本 元 素 是 注释 。 虽 然 可 以 在 ISP 网 页 中 包含 HTML 注释 ， 
如 果 浏 览 者 查看 网 页 的 源 代码 ,也 会 看 到 这 些 HTML 注释 。 如 果 不 想 让 浏览 者 看 到 注 
释 ,可 以 将 它 放 在 二 % 一 注释 一 % 二 标记 里 。 


6.5.2 JSP 指令 


JSP 的 指令 格式 为 
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<s$8e 指 令 名 属性 =" 属 性 值 "%> 


1. page 指令 


page 指令 用 来 定义 整个 JSP 页 面 的 全 局 属性 。page dá JE HH * — 96 (0 MA>” F 
符 串 构成 的 标记 符 指定 。 在 标记 符 中 是 代码 体 , 包 括 指令 的 类 型 和 值 。 例 如 人 二 上 四 
page import — "java. sql. * * 422 "i 4 frr JSP 容器 将 java. sql 包 中 的 所 有 类 和 接口 都 


引入 当前 的 JSP 页 面 。 


page 指令 的 属性 有 15 个 ,如 表 6-2 所 示 。 


表 6-2 page 指令 的 属性 





属 tt 


x 能 





language 一 "语言 " 


指定 JSP 容器 编译 JSP 网 页 的 语言 。JSP 2. 0 规范 指出 ,目前 只 可 以 使 
用 Java 语言 





extends 一 " 基 类 名 " 


定义 JSP 网 页 转换 Servlet 时 继承 的 父 类 ,通常 不 使 用 该 属性 





import— "importList" 


定义 此 ISP 网 页 可 以 使 用 的 Java 类 库 ,默认 已 导入 4 个 包 : java. lang. 
* java. servlet. * , java. servlet. http. * 和 java. servlet. jsp. * 。 如 果 
要 导入 多 个 包 , 既 可 以 在 一 个 语句 写 完 , 也 可 以 分 多 个 语句 写 。 例 如 ， 
<%@ page import="java. io. * " %> 

<%@ page import— "java. sql. * " %> 

55<%@ page import= "java. io. * java. sql. * " %> SR 





session— "true | false" 


决定 此 JSP 网 页 是 否 可 以 使 用 session 对 象 。 默 认 值 为 true 





buffer— "none| size in kb" 


决定 输出 流 是 否 有 缓冲 区 。 默 认 值 为 8KB 的 缓冲 区 





autoFlush="true | false" 


决定 输出 流 的 缓冲 区 是 否 要 自动 清除 ,默认 值 为 true。 如 果 为 false, E 
冲 区 满 了 会 产生 异常 





isThreadSafe="true | false" 


告诉 JSP 容器 ,此 JSP 网 页 是 否 能 同时 处 理 多 个 请 求 。 默 认 值 为 true， 
如 果 此 值 设 为 false,JSP 在 转换 成 Servlet 时 会 实现 SingleThreadModel 
接口 





info= "text" 


指定 此 JSP 网 页 的 相关 信息 ,可 用 Servlet 接口 的 getServletInfo() 得 到 





errorPage= "error. url" 


如 果 发 生 异 常 错误 时 ,网 页 会 被 重新 指向 指定 的 URL 





isErrorPage= "true | false" 


此 JSP Page 是 否 为 专门 处 理 错误 和 异常 的 网 页 





contentType 一 "ctinfo” 


指定 MIME 类 型 和 JSP 网 页 的 编码 方式 ,作用 相当 于 
HttpServletResponse 接口 的 setContentType () 方法。 例如 ,一 % @ 
page contentType= "text/html; charset=GB2312"%> 





pageEncoding — "peinfo" 


指定 JSP 页 面 的 编码 方式 ,如 果 设 置 了 该 属性 ,JSP 页 面 就 以 此 方式 编 
码 ,否则 ,就 使 用 contentType() 属 性 指定 的 字符 集 , 假 若 两 个 属性 都 没 
有 指定 ,就 默认 为 iso-8859-1 





isELIgnored="true| false" 





如 果 为 true, 则 忽略 EL RIAs AM EL 表达 式 有 效 





注 : 还 有 两 个 属性 不 常用 ,这 里 不 作 介绍 。 
对 于 page 指令 ,需要 说 明 的 是 : <%@ page A> 4 TEJU-T ET ISP 页 面 ,同样 包 
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括 静 态 的 包含 文件 。 但 是 二 %@ page % 记 指令 不 能 作用 于 动态 的 包含 文件 ,可 以 在 一 个 
页 面 中 引用 多 个 二 %@ page % 二 指令 ,但 是 其 中 的 属性 只 能 用 一 次 ,不 过 也 有 例外 , 那 就 
是 import 属性 。 因 为 import 属性 和 Java 中 的 import 语句 类 似 ( 参 照 Java Language. 
import 语句 引入 的 是 Java 语言 中 的 类 )。 

无 论 把 二 %@ page N> AWE JSP 的 文件 的 哪个 地 方 , 它 的 作用 范围 都 是 整个 
JSP 页 面 。 不 过 ,为 了 JSP 程序 的 可 读 性 及 好 的 编程 习惯 ,最 好 还 是 把 它 放 在 JSP 文件 的 
顶部 。 

Gil 6-2 (EJ page 指令 打开 Word 页 面 并 显示 时 间 。 


<%@page contentType- "application/msword;charset=GBK"% > 
<%@page language="java"%> 
<%@page import= "java.util. * "$5 
<html> 
<body> 
<% 
out. println ("< div style= V" color: red; \"> 这 是 在 浏览 器 中 调用 的 Word 界面 
</div>")? 
GregorianCalendar now= new GregorianCalendar (); 
int year,month,date,h,m, s; 


String leap; 


year=now.get (now.YEAR) ; // 取 得 YEAR F BE AY fii 

month- now.get (now.MONTH) + 1; // 取 得 MONTH 字段 的 值 

date=now.get (now.DATE) ; * // 取 得 DATE 字段 的 值 

h=now.get (now.HOUR OF DAY); // 取 得 HOUR_OF_DAY 字段 的 值 

m=now.get (now.MINUTE) ; // 取 得 MINUTE 字段 的 值 

s=now.get (now. SECOND) ; // 取 得 SECOND 字段 的 值 

out.println ("<div> 现 在 时 间 :"+ year+" 4E "+month+" 月 "+date+" A "«he" AY "eme" 4) "+s+ 
" fec /div»"); // 显 示 时 间 


leap=now.isLeapYear (year) ?" 是 " : "不 是 "; 
out.println("«div» 4-4F "+ leap+ "[B4E « /div» "); 
$> 


以 上 输出 是 用 Java 脚本 完成 的 。 


</body> 
</html> 


输出 如 图 6-37 所 示 。 





这 是 在 浏览 器 中 调用 的 word 界面 
现在 时 间 ; 2015 年 7 月 14 日 11 时 30 分 94 秒 


今年 不 是 头 年 
以 上 输出 是 用 Java 脚 本 完成 的 。 
6-37 ”使 用 page 指令 打开 Word 页 面 并 显示 时 间 








966: — 动态 Web 开 发 


例子 中 的 语句 “二 %@page contentType = "application/msword; charset = GBK" % >” BI 
是 使 用 page 指令 设置 该 JSP 页 面 的 MIME 类 型 (MS-WORD) 和 字符 编码 (GBK) 的 , 它 表 
示 , 用 户 浏览 器 请 求 页面 时 要 启动 本 地 的 MS-Word 应 用 程序 解析 执行 收 到 的 信息 。 如 果 用 
户 浏 览 器 所 在 计算 机 没有 安装 MS-Word 应 用 程序 .浏览 器 就 无 法 处 理 接收 到 的 数据 。 若 将 
该 语句 改 为 “二 %@page content Type = "text/html; charset=GBK" % 二”, 则 表示 用 户 浏览 器 
启用 HTML 解析 器 解析 执行 收 到 的 信息 。page 指令 的 contentType 属性 值 如 表 6-3 所 示 。 


表 6-3 page 指令 的 contentType 属性 






































contentType 属性 值 MIME 类 型 说 明 
text/html html html 文档 
text/plain txt 文本 文件 
application/java class Java 类 文件 
application/zip zip 压缩 文件 
application/pdf pdf pdf 文件 
Te gif 图 片 类 型 
audio/basic au 音频 类 型 
Application/x-msexcel Excel 电子 表格 
Application/msword Word Word 文档 


2. include 指令 

include 指令 就 是 前 面 所 说 的 静态 包含 指令 , 它 是 向 JSP 页 面 内 某 处 嵌入 一 个 文件 。 
这 个 文件 可 以 是 HTML 文件 JSP 文件 或 其 他 文本 文件 。 

JSP 语法 格式 如 下 : 


<%@include file-"relativeURL" %> 


<%@ include file=" 相 对 位 置 "%> 


例 6-3 {EJH include 指令 统一 插入 页 面 的 头 部 和 底部 。 
例如 ,一 个 管理 信息 系统 会 有 多 个 页 面 ,各 页 面 的 内 容 会 不 同 , 但 一 般 希 望 各 页 面 的 
头 部 都 显示 该 管理 信息 系统 的 名 称 ,如 “网 上 购物 系统 ”, 底 部 显示 开发 单位 、 版 本 号 等 信 
息 。 程 序 login. jsp 中 用 include 指令 静态 插入 top. html 和 bottom. html 文档 。 所 谓 的 
静态 插入 是 指 将 要 插入 文档 中 的 代码 插入 include 指令 处 ,形成 了 一 个 较 大 的 文档 ,然后 
统一 编译 执行 。 
top.html: 
<table border="0" width="100% "> 
<tr> 
<td style= "width:100% ; font:normal normal bolder 16pt 宋体 : 
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text-align:center;"> 网 上 购物 系统 < /td> 
</tr><table> 


bottom.html: 

<table border= "0" width- "100$ "> 

«tr» 

«td style= 'width:100% ;text- align:center;font- size:9.0pt;font- family: 
"Times New Roman";color:black;border- top:l solid red; 
padding- top:5; '» Copyright 
&copy; 2016 RunCheng Inc. All rights reserved. CXXY 版 权 所 有 < /td> 

< /tr» «table» 


login.jsp: 
«$6 page contentType- "text/html; charset=gbk"% > 
«$6 page language="java"% > 
<html> 
<head> 
<meta http- equiv= "Content- Type" content= "text/html;charset- gbk"» 
<title>< /title> 
< /head» 
<body> 
<center> 
<%@ include file- "top.html"$» 
<br><div style- "font:normal normal bolder 14pt 宋体 ;"> 用 户 登 录 < /div> 
< form name- "£1" action=" " method="post" target="_self"> 
<table width="300" border= "0"> 
<tr> 
<td align= "right"> 用 户 名 :< /td> 
<td align="left">< input type="text" size="15" name- "UserName" />< /td> 
</tr> 
«tr» 
«td align-"right"» f &nbsp;&nbsp;lij :< /td» 
<td align="left"> «input type="password” size- "15" name- "Password" />< /td» 
</tr> 
</table> 
<table width="300" border="0"> 
<tr> 
<td align="center"> <input type="submit" name= "submit" value- "登录 " />< /td> 
</tr> 
</table> 
</form> 
<%@ include file- "bottom.html"$ > 
</center> 


</body> 
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</html> 


输出 如 图 6-38 所 示 。 





Ke > NI P htipy/localhost:8080/ost/loginjsp 








‘Copyright © 2010 RocCheng Ic Alias reserved CXXY. 版 权 所 有 











图 6-38 使 用 include 指令 统一 插入 页 面 的 头 部 和 底部 


6.5.3 JSP 动作 组 件 


JSP 动作 组 件 是 一 些 符合 XML 语法 格式 的 标记 ,被 用 来 控制 Web 容器 的 行为 ,可 以 
动态 地 向 页 面 中 插入 文件 .重用 JavaBean 组 件 .设置 JavaBean 的 属性 等 。 

常见 的 JSP 动作 组 件 如 下 : 

<jsp: include> 动态 包含 ,在 页 面 被 请 求 时 引入 一 个 文件 。 

<jsp: param 二 一 一 在 动作 组 件 中 引入 参数 信息 。 

<jsp: forward> 一 一 把 请 求 转 到 一 个 新 的 页 面 。 

<jsp: setProperty 二 一 一 设置 JavaBean 的 属性 。 

<jsp: getProperty>— 输出 某 个 JavaBean 的 属性 。 

<jsp: useBean 记 一 一 寻找 或 者 实例 化 一 个 JavaBean, 

1. include 动作 组 件 

include 动作 组 件 把 指定 文件 插入 正在 生成 的 页 面 。 语 法 格式 如 下 : 





<jsp:include page= "文件 名 " flush= "true"/> 。 

它 与 指令 二 %@ include file==" 文 件 名 "”% 二 的 功能 基本 上 是 一 样 的 ,但 在 运行 机 理 
上 还 是 有 很 大 的 区 别 的 : 指令 标记 的 包含 指令 include 是 将 静态 嵌入 文件 作为 主体 文件 
的 一 部 分 ,所 以 主 文件 和 子 文件 其 实 是 一 体 的 。 而 动作 标记 的 包含 指令 include EIA 
入 文件 , 子 文件 不 必 考 虑 主 文件 的 属性 。 因 此 ,JSP 页 面 与 它 所 包含 的 文件 在 逻辑 上 和 语 
法 上 是 独立 的 ,如 果 对 包含 的 文件 进行 了 修改 ,那么 运行 时 可 以 看 到 所 包含 文件 修改 后 的 
结果 。 而 静态 的 include 指令 包含 的 文件 如 果 发 生变 化 ,必须 重新 将 JSP 页 面 转译 成 
Java 文件 ,否则 只 能 看 到 所 包含 的 修改 前 的 文件 内 容 。 

归纳 起 来 ,指令 标记 在 编译 时 就 将 子 文件 载 入 ;而 动作 标记 在 运行 时 才 将 子 文件 
BA, 

2. forward 动作 组 件 

forword 动作 组 件 用 于 将 浏览 器 显示 的 网 页 ,导向 至 另 一 个 HTML 网 页 或 ISP 网 
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页 ,客户 端 看 到 的 地 址 是 A 页 面 的 地 址 ,而 实际 内 容 却 是 B 页 面 的 内 容 。 语 法 格式 如 下 : 
<jsp:forword page= "网 页 名 称 "> 
其 中 ,page 属性 包含 的 是 一 个 相对 URL,page 的 值 既 可 直接 给 出 ,也 可 以 在 请 求 的 时 候 
动态 计算 。 使 用 该 功能 时 ,浏览 器 的 地 址 栏 中 地 址 不 会 发 生 任何 变化 。 
3. <jsp: param> 
<jsp: param 记 用 于 传递 参数 信息 ,必须 配合 二 jsp: include>BK<jsp: forward> sh 
作 组 件 一 起 使 用 。 语 法 如 下 : 


<jsp:param name= 参 数 名 称 ,value= 值 /> 


当 该 组 件 配合 一 jsp: include>#l<jsp: forword 二 一 起 使 用 时 ,可 以 将 param 组 件 
中 的 值 传递 到 include 和 forword 动作 组 件 要 加 载 的 文件 中 去 。 

Gil 6-4 编写 4 个 JSP 页 面 : one. jsp, two. jsp, three. jsp 和 error. jsp, one. jsp, two 
. jsp 和 three. jsp 页 面 都 含有 一 个 导航 条 ,以 便 用 户 方便 地 单 击 超 链 接 访问 这 3 个 页 面 ， 
要 求 这 3 个 页 面 通过 使 用 include 动作 标记 动态 加 载 导航 条 文件 head. txt, 

导航 条 文件 head. txt 的 内 容 如 下 : 


<% 8 page contentType- "text/html; charset=GB2312" %> 
<table cellSpacing- "1" cellPadding- "1" width- "60$ " align="center" 
border="0"> 
<tr valign="bottom"> 
<td><A href="one.jsp">< font size=3>one.jsp H ilii « /font>< /A» « /td» 
«td» «A href- "two. jsp"»« font size- 3» two. jsp Wl M< /font>< /A» « /td» 
«td»«A href- "three. jsp"» « font size-3» three.jsp Ji ilf « /font» « /A>< /td> 
</tr> 
« /Font» 
</table> 


各 页 面具 体 要 求 如 下 : 

(1) one. jsp 的 具体 要 求 。 

要 求 one. jsp 页 面 有 一 个 表单 ,用 户 使 用 该 表单 可 以 输入 一 个 1 一 100 之 间 的 整数 ， 
并 提交 给 该 页 面 ;如 果 输 入 的 整数 在 50 一 100 之 间 ( 不 包括 50) 就 转向 three. jsp; 如果 在 
1~ 50 之 间 就 转向 two. jsp; 如 果 输 入 不 符合 要 求 就 转向 error. jsp. BK forward 标记 在 
实现 页 面 转向 时 ,使 用 param 子 标记 将 整数 传递 到 转向 的 two. jsp 或 three. jsp 页 面 ,将 
有 关 输 入 错误 传递 到 转向 的 error. jsp 页 面 。 

(2) two. jsp、three. jsp 和 error. jsp 的 具体 要 求 。 

要 求 two. jsp 和 three. jsp 能 输出 one. jsp 传递 过 来 的 值 , 并 显示 一 幅 图 像 , 该 图 像 的 
宽 和 高 刚好 是 one. jsp 页 面 传递 过 来 的 值 。error. jsp 页 面 能 显示 有 关 的 错误 信息 和 一 幅 
图 像 。 

one. jsp 效果 如 图 6-39 所 示 。 

two. jsp 效果 如 图 6-40 所 示 。 


B http://127. 0.0. 1:9080/testl/one. jsp — Microsoft Internet Explorer 
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Guo) db) SEO GO TAD 大 用 加 


On-O DAG x Yom eia-2 »-LD«Me a s 














lst [E atep: 7127. 0. 0. 1:s000/test1 one Jsp 
N -+ - A 
aeo Gi se d 





Google 
one. jsp 页 面 two. jsp 页 面 


请 输入 1 至 100 之 间 的 整数 : 
[Ea] 








three. jsp 页 面 





6-39 使 用 include 动作 标记 加 载 导航 条 


ET 
文件 如 REV XE) KRW TAG BHO 


Qm-O AAG Se tm oA 29 Lau ea 


Microsoft Internet Explorer 








[itl ©) f] aep //127. 0.0.1 3080/certt fone, jspPrumber=¢Deseboi c-uctic pasas 


Goge[ CR A ft ae E 





one. jsp 页 面 two. jsp 页 画 





This is two. jsp. 


传递 过 来 的 值 是 40 





three. jsp 页 面 








图 6-40 ”得 到 param 子 标记 传递 来 的 值 


three. jsp 效果 如 图 6-41 所 示 。 


//121. 0. 0. 1: 9080/t os 





Xp Sip FEV KRW TRO Sb 


Om- O HAG pr km O2 Sm- cmd 3 


itk > [i] necp: 7/127. 0. 0. 1:9000/test1 /one. jsy?zumber -S04sxbei eMDICDOMES 


Googe sae Goh B. 








one. jsp 页 面 two. jsp 页 面 





Thi three. jap. 


Feit E99 








three. jsp 页 








图 6-41 得 到 param 子 标记 传递 来 的 值 


error. jsp 效果 如 图 6-42 所 示 。 
下 面 给 出 ISP 页 面 的 参考 代码 。 


one.jsp: 
<%@page contentType- "text /html;charset=GB2312" %> 
<HEAD> 
« jsp:include page= "head.txt"/» 
</HEAD> 
<HTML> 


<BODY bgcolor-yellow» 
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Internet Explorer 





Om- O- DAG As Yom OBS m UCHERS 


HED) [il] nttp://127.0.0.1: 2060) testi one. jsp^ranbersre£er£ehruini tMCSXCIYESXE5 
cede TITLE KI 
one. jsp 页 面 two. jsp 页 面 three. jsp 页 面 

















This is error. jsp. 
传递 过 来 的 错误 信息 java. lang. NunberFormatExeeption: For input string: "wefwrfe^ 











图 6-42 显示 错误 信息 


<FORM actior 





"" method-get name- form» 
请 输入 1- 100 之 间 的 整数 :< INPUT type="text” name- "number"> 
« BR» « INPUT TYPE- "submit" value= "送出 " name- submit» 
</FORM> 
<% 
String num- request .getParameter ("number") ; 
if (num==null) 
{ num- "0"; 
} 
try 
{ 
int n= Integer.parseInt (num); 
if(n»-1&&n«- 50) 
{ 
$> <jsp:forward page= "two.jsp"» 
<jsp:param name= "number" value- "«$-n$»" /> 
</jsp:forward> 
<% } 
else if (n> 50ggn<=100) 
{ 
5» «jsp:forward page= "three.jsp"> 
<jsp:param name= "number" value- "« $-n$»" /> 
</jsp:forward> 
<% } 
} 
catch (Exception e) 
{ 
各 > <jsp:forward page- "error.jsp"> 
<jsp:param name- "mess" value= "< 当 =e-toString() 当 > ”/> 
</jsp:forward> 


<% } 
s» 

< /BODY» 
< /HTML» 


two.jsp: 
«$6 page contentType- "text/html;charset-GB2312" %> 
« HEAD» 
< jsp:include page= "head.txt"/» 
< /HEAD> 
XHTML» 
« BODY bgcolor- yellow» 
<P><Font size-2 color=blue> 
This is two.jsp. 
« /Font» 
«Font size=3> 
<% 
String s= request .getParameter ("number"); 
out.println("<BR> 传 递 过 来 的 值 是 "+ s); 
%> 
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<BR>< img src- "a.jpg" width= "<%=s%>" height="<%=s%>">< /img> 


< /FONT> 
</BODY> 
< /HTML» 


three.jsp: 
<% 0 page contentType- "text/html;charset-GB2312" %> 
<HEAD> 
« jsp:include page= "head.txt"/» 
< /HEAD» 
<HTML> 
<BODY bgcolor- yellow» 
<P><Font size-2 color= red> 
This is three.jsp. 
« /Font» 
«Font size=3> 
<% 
String s= request .getParameter ("number"); 
out.println ("<BR> 传 递 过 来 的 值 是 "+ s); 


s» 


«BR» < ing src-"b.jpg" width="<%=s%>" height="<%=s%>"></img> 


< /FONT> 
< /BODY> 
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</HTML> 


error.jsp: 
<%@page contentType- "text/html; charset=GB2312" $% > 
<HEAD> 
« jsp:include page= "head.txt"/» 
< /HEAD» 
<HTML> 
<BODY bgcolor- yellow» 
«P»«Font size-5 color- red» 
This is error.jsp. 
« /Font» 
«Font size=2> 
<% 
String s= request .getParameter ("mess"); 
out -print1n ("<BR> 传 递 过 来 的 错误 信息 "+ s)7 
> 
<BR> < ing src="c.jpg" width= "120" height="120"> < /img» 
< /FONT> 
</BODY> 
</HTML> 


6.6 JSP 内 置 对 象 





所 谓 “ 内 置 对 象 ”, 就 是 JSP 已 经 实例 化 的 Java 对 象 ,用 户 可 以 在 JSP 中 直接 使 用 。 
JSP 提供 的 内 置 对 象 有 request, response, session, application, out 等 , request 是 
HttpServletRequest 接口 的 对 象 , 当 向 服务 器 请 求 一 个 页 面 时 生成 request 对 象 ; 
response 是 HttpServletResponse 接口 的 对 象 , 当 服 务 器 应 答 一 个 请 求 时 生成 response 
对 象 ;session 是 Httpsession 接口 的 对 象 ,一 旦 用 户 请 求 了 一 个 ISP 页 面 就 会 生成 
session 对 象 ,并 且 无 论 该 用 户 是 否 从 一 个 页 面 转 到 另 一 个 页 面 , 该 session 对 象 总 与 该 用 
户 绑 定 ,直到 该 用 户 退 出 系统 ;application 是 ServletContext 接口 的 对 象 ,在 Web 服务 器 
运行 期 间 它 始终 存在 .每 个 JSP 页 面 都 可 以 存 取 它 ;out 是 PrintWriter 类 的 对 象 。 


6.6.1 request 对 象 


当 客户 端 请 求 一 个 JSP 页 面 时 ,JSP 容器 会 将 客户 端的 请 求 信息 封装 于 request 对 
象 ,请 求 信 息 的 内 容 包 括 请 求 的 头 信息 .请 求 的 方式 .请 求 的 参数 名 称 和 参数 值 等 信息 。 
通过 调用 该 对 象 相应 的 方法 ,可 以 获取 来 自 客户 端的 请 求 信息 ,然后 做 出 响应 。 它 是 
HttpServletRequest 类 的 实例 。request 对 象 的 主要 方法 如 表 6-4 所 示 。 
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表 6-4 request 对 象 的 方法 







































































序号 方法 名 方法 说 明 

1 getAttribute(String name) 返回 指定 属性 的 属性 值 

2 getAttributeNames() 返回 所 有 可 用 属性 名 的 枚 举 

3 getCharacterEncoding() 返回 字符 编码 方式 

4 getContentLength() 返回 请 求 体 的 长 度 (以 字 节 数 ) 

5 getContentType() 得 到 请 求 体 的 MIME 类 型 

6 getInputStream() 得 到 请 求 体 中 一 行 的 二 进 制 流 

ý getParameter(String name) 返回 name 指定 参数 的 参数 值 

8 getParameterNames() 返回 可 用 参数 名 的 枚 举 

9 getParameterValues(String name) 返回 包含 参数 name 的 所 有 值 的 数组 
10 getProtocol() 返回 请 求 用 的 协议 类 型 及 版 本 号 
11 getServerName() 返回 接受 请 求 的 服务 器 主机 名 

12 getServerPort() 返回 服务 器 接受 此 请 求 所 用 的 端口 号 
13 getReader() 返回 解码 过 了 的 请 求 体 

14 getRemoteAddr() 返回 发 送 此 请 求 的 客户 端 TP 地址 
15 getRemoteHost() 返回 发 送 此 请 求 的 客户 端 主机 名 
16 setAttribute(String key,Object obj) 设置 属性 的 属性 值 

17 getRealPath(String path) 返回 一 虚拟 路 径 的 真实 路 径 

18 getMethod() 返回 客户 向 服务 器 传输 数据 的 方式 
19 getRequestURLO 返回 发 出 请 求 字符 串 的 客户 端 地址 
20 getsession() 创建 一 个 session 对 象 





例 6-5 获取 HTML<form> 表 单 提交 到 服务 器 的 数据 。 

request 对 象 封装 了 客户 端 请 求 的 信息 ,如 请 求 的 方法 .请 求 的 参数 .请 求 的 卫 等 。 
在 程序 El. jsp 中 ,名 字 为 日 的 表单 form 以 post 的 方式 向 服务 器 上 的 程序 E2. jsp 提交 
参数 Pl 和 了 P2,P1 只 有 一 个 值 ,P2 是 多 选项 对 应 多 个 值 。 单 击 “ 提 交 ” 按 钮 后 ,执行 
JavaScript 函数 check() 检 查 Pl1、P2 是 否 有 值 , 无 值 则 在 对 应 的 位 置 显示 红色 的 "* ”表示 
该 信息 必 填 并 且 不 提交 ,有 值 则 使 用 JavaScript 表单 对 象 的 方法 submit() 提 交 £1 表单 的 
参数 。E2. jsp 接受 El. jsp 表单 提交 的 数据 Pl 和 P2。 因 P2 可 能 是 多 值 的 ,使 用 了 语句 
“String items[ ] = request. getParameterValues("P2");” 将 P2 的 值 存在 数组 items 中 。 
对 于 单 值 的 数据 如 P1. 可 以 使 用 request 对 象 的 “String getParameter(String name)” Fy 
法 也 可 以 使 用 “String[] getParameterValues(String name) ”方法 获得 。 

使 用 “记事 本 ”分 别 输 入 ET. jsp 和 E2. jsp 程序 并 存放 在 应 用 目录 中 。 运 行 该 程序 ， 
未 输入 参数 即 单 击 “ 提 交 ” 按 钮 后 的 页 面 如 图 6-43 所 示 ;输入 参数 后 单 击 “ 提 交 ” 按 钮 后 的 
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页 面 如 图 6-44 所 示 。 


喜欢 的 运动 。 口 游泳 OEL 口 打球 喜欢 的 运动 。 口 游泳 OL 口 打球 + 


: 
j eme T TTTT 


图 6-43 未 输入 参数 即 单 击 “ 提 交 ” 按 钮 





[i BOBCEDTCE 


9 ) p 2 
[Æ «y: 7/182. 168.2. 1:6060/23] ied 98 | 


你 好 | Jerry, ”你 喜欢 的 运动 是 ， 游泳、 打球 
喜欢 的 运动 ， 网 游泳 Dedi PIR 





图 6-44 获取 HTML<form> 表 单 提 交 到 服务 器 的 数据 


El.jsp: 

<% @ page contentType- "text/html; charset=gbk"% > 

<%@page language="java"%> 

<html> « head» 

«meta http- equiv- "Content- Type" content= "text/html;charset- gbk"» 
<title>< /title> 

<script type="text/javascript"> 

function check () { 


var itemChecked- false; // 记 录 是 否 选 择 了 运动 项 目 
var signName= false; // 记 录 是 否 填写 了 名 字 
if(document.f1.Pl.value==""){ 

sl.style.display="inline"; // 显 示 红 色 的 "* " 
jelse{ 

signName- true; // 填 写 名 字 


} 
//alert (document .all ("P2") .length) ; 
for (var i=0;i<document .all ("p2") .length;i++){ 
if (document .all ("P2") [i] .checked) ( // 检 查 是 否 选择 了 运动 项 目 
itemChecked- true; // 选 择 了 运动 项 目 
} 
} 
if(!itemChecked) il.style.display- "inline"; // 显 示 红 色 的 "*" 
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if (signName && itemChecked) document.f1.submit (); // 提 交 £i 表单 的 数据 

} 

</script> 

</head> 

<body> 

<center> 

< form name- "£1" action-"E2.jsp" method="post" target="_self"> 

<table width= "100% " border="0"> 

«tr» 

«td align="center"> i% :« input type="text" size- "15" name- "Pl" />< span name- "sl" id=" 

s1" style- "color:red;display:none;"» &nbsp; * < /span» < /td> 

</tr> 

<tr> 

<td align- "center"> 喜 欢 的 运动 : 

«input type="checkbox” name- "P2" value= "游泳 " /> 游泳 

«input type="checkbox" name- "P2" value= "MLW" /> f&ili 

«input type="checkbox" name- "P2" value= "jT ER" /> 打球 

<span name- "i1" id- "il" style- "color:red;display:none;"» &nbsp; * < /span» 

</td> 

</tr> 

</table> 

<table width= "300" border="0"> 

<tr> 

«td align="center">< input type="button" name= "bl" value= "提交 " 
onclick- "check () ;"/» « /td> 

</tr> 

</table> 

</form> 

</center> 

</body> < /html> 


E2.jsp: 
<% @ page contentType- "text/html;charset- gbk"$ > 
<%@page language- "java"$» 
«html» «head» 
«meta http- equiv- "Content- Type" content- "text/html; charset=gbk"> 
<title></title> 
</head> 
<body> 
<center> 
<% 
String Name= request .getParameter ("Pl"); 
//String Name[]= request .getParameterValues ("P1"); 
String items []- request .getParameterValues ("P2") ; 
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&» 
你 好 :<s=Names> 。 你 喜欢 的 运动 是 : 
<3 

for (int i=0;i<items.length;it+){ 


out.print (items [i]) 


if (i!= (items.length- 1)) out.print(","); 


} 
各 > 
</center> 
< /body> < /html> 


6.6.2 response 对 象 


与 resquest 对 象 相 对 应 的 对 象 是 response, WI VA JH response 对 象 对 用 户 的 请 求 作 
出 动态 响应 ,向 客户 端 发 送 数据 。 例 如 , 当 用 户 请 求 访问 一 个 JSP 页 面 时 ,该 页 面 用 page 
指令 设置 页 面 的 content Type 属性 的 值 是 text/html, BW JSP 引擎 将 按照 这 种 属性 值 响应 
用 户 的 请 求 将 页 面 的 静态 部 分 发 送 给 客户 端 。 如 果 动 态 地 改变 content Type 属性 的 值 ， 
就 要 使 用 response 对 象 中 的 setContentType(String s) 方 法 。 


1. response 对 象 的 主要 方法 


response 对 象 的 主要 方法 如 表 6-5 所 示 。 
表 6-5 response 对 象 的 主要 方法 


序号 方 法 名 


方法 说 明 





1 


addCoolie(Cookie coolie) 


向 客户 端 写 人 一 个 cookie 


























2 | addHeader(String name,String value) | 添加 HTTP 文件 头 

3 containsHeader( String name) 判断 名 为 name 的 header 文件 头 是 否 存在 

4 | encodeURL(String url) 把 sessionId 作为 URL 参数 返回 客户 端 

5 getOutputStream() 获得 到 客户 端的 输出 流 对 象 

6 sendError(int) 向 客户 端 发 送 错误 信息 ,如 404 信息 

? sendRedirect(String url) 重 定向 请 求 

8 setContentType(String type) 设置 响应 的 MIME 类 型 

9 | setHeader(String name, String value) TENEH HITE LAOS UE AUR RE 








存在 , 则 新 值 覆盖 原 有 的 旧 值 





2. response 对 象 的 常用 技术 


1) 使 用 response 对 象 设置 Http 文件 的 头 信息 
这 里 主要 介绍 两 个 方法 : setContentType(String type) fll setHeader(String name. 
String value) 。 


setContentType(String s) 方 法 可 以 动态 地 改变 ContentType 的 属性 值 ,参数 s 可 取 
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text/html,text/plain,application/ x-msexcel,application/msworld 等 。 

setHeader(String name. String value) 方 法 可 以 添加 新 的 响应 头 和 头 的 值 。 下 面 的 
示例 中 ,response 对 象 添加 一 个 响应 头 refresh, 其 头 值 是 3。 那 么 客户 收 到 这 个 头 之 后 ， 
每 隔 3 秒 刷 新 一 次 页 面 。 

fi 6-6 setHeader 方法 的 使 用 。 


<%@page contentType- "text/html;charset-GB2312" $% > 

<%@page import= "java.util.x " $> 

<HTML> 

<BODY bgcolor=cyan>< Font size=5> 

<P> 现 在 的 时 间 是 :<BR> 

<%out.print1n(""+new Date()); 
response.setHeader ("Refresh","3"); 

$> 

< /FONT> 

< /BODY> 

< /HIML> 


2) 使 用 response 实现 重 定向 

对 于 response 对 象 ,最 常用 的 是 sendRedirect 方法 ,可 以 使 用 这 个 方法 将 当前 客户 
端的 请 求 转 到 其 他 页 面 。 相 应 的 代码 格式 为 response. sendRedirect ("URL 地 址 ");”。 
下 面 示例 中 ,login. html 提交 姓名 到 response. jsp 页 面 ,如 果 提 交 的 姓名 为 空 ,需要 重 定 
向 到 login. html 页 面 , 否 则 显示 欢迎 界面 。 

例 6-7 response 实现 重 定向 。 

login. html 


<HTML> 
<BODY> 
< FORM ACTION- "response. jsp" METHOD= "POST"> 
<P> 姓 名 :< INPUT TYPE="TEXT" SIZE="20" NAME= "UserID">< /P> 
«P» « INPUT TYPE= "SUBMIT" VALUE= "fb 交 "></P> 
< /FORM> 
</BODY> 
< /HIML> 
response.jsp 
<% @page contentType- "text/html;charset-GB2312" %> 
<HTML> 
<BODY> 
<% 
String s=request.getParameter ("UserID "); 
byte b[]=s.getBytes ("ISO- 8859- 1") ; 
s-new String (b); 
if (s--null) s=""  response.sendRedirect ("login.html"); 
else out.println(" 欢 迎 您 来 到 本 网 页 13); 
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8» 
< /BODY» 
< /ETML» 
注意 : 用 一 jsp: forward 48 4 fe response 对 象 中 的 sendRedirect 方法 都 可 以 实现 
页 面 的 重 定向 ,但 二 者 是 有 区 别 的 。 使 用 一 jsp: forward 二 只 能 在 本 网 站 内 跳 转 , 且 跳 转 
后 在 地 址 栏 中 仍然 显示 以 前 页 面 的 URL, 跳 转 前 后 的 两 个 页 面 属 同一 个 request, 用 户 程 
序 可 以 用 request 设置 或 传递 用 户 程序 数据 。 但 对 于 response. sendRedirect 则 不 一 样 ， 
它 相对 前 者 是 绝对 跳 转 ,在 地 址 栏 中 显示 的 是 跳 转 后 页 面 的 URL, 跳 转 前 后 的 两 个 页 面 
不 属 同一 个 request, 当然 也 可 用 其 他 技术 手段 保证 request 为 同一 个 ,但 这 不 是 本 节 的 讨论 
范围 。 对 于 后 者 来 说 ,可 以 跳 转 到 任何 一 个 地 址 的 页 面 。 例 如 : response. sendRedirect 
C'http: //www. baidu. com/") 。 


6.6.3 Session 对 象 


1. Session 的 基本 含义 

Session 的 中 文 意思 是 “会 话 ”, 在 JSP 中 代表 服务 器 与 客户 端 之 间 的 信息 交互 。 从 一 
个 客户 打开 浏览 器 并 连接 到 服务 器 开始 ,到 客户 关闭 浏览 器 离开 这 个 服务 器 结束 , 称 为 一 
个 会 话 。 举 个 简单 的 例子 ,人 们 打 电话 时 从 拿 起 电话 拨号 到 挂 断 电 话 这 中 间 的 一 系列 历 
程 就 是 一 个 会 话 , 可 以 称 之 为 一 个 Session。 当 客户 访问 一 个 服务 器 时 ,可 能 会 在 这 个 服 
务 器 的 几 个 页 面 之 间 反 复 连接 ,或 反复 刷新 一 个 页 面 ,服务 器 会 通过 Session 对 象 知道 这 
是 同一 个 客户 在 操作 。 

2. Session 的 工作 过 程 

当 程序 需要 为 某 个 客户 端的 请 求 创立 一 个 Session 的 时 候 ,服务 器 首先 检查 这 个 客 
户 端的 请 求 里 是 否 已 包含 了 一 个 Session 标识 , 即 Session id。 如 果 已 包括 一 个 Session 
id, 则 说 明 以 前 已 经 为 此 客户 端 创建 过 Session. 服务 器 就 会 依照 Session id 把 这 个 
Session 检索 出 来 使 用 ; 如 果 客 户 端 请 求 不 包括 Session id, 则 为 此 客户 端 创建 一 个 
Session 并 且 生 成 一 个 与 此 Session 相关 联 的 Session id, Session id 的 值 是 唯一 的 。 

3. Session 对 象 的 常用 操作 

Session 在 实际 应 用 中 使 用 频率 最 高 的 是 存 人 变量 与 读 取 变量 ,掌握 这 两 个 方法 的 使 
用 也 就 掌握 了 Session 的 核心 功能 。 

CD FFA Session 信息 。 根 据 需 要 ,可 将 多 个 信息 存 人 Session 中 。 在 早期 的 JSP1.0 版 
本 中 ,使 用 putValue 方法 实现 这 一 功能 ,现在 则 使 用 setAttribute 方法 将 信息 存 人 Session 
中 。 语 法 格式 如 下 : 


Session. setAttribute ("变量 名 称 ", 值 ) 


(2) 读 取 Session 信息 。Session 中 的 信息 在 使 用 前 要 先 读 取 , 读 取 使 用 getAttribute 
方法 ,在 JSP1.0 版 本 则 使 用 getValue 方法 ,语法 格式 如 下 : 


Session. getAttribute ("变量 名 称 ") 
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(3) 删除 Session 信息 。Session 中 的 信息 在 不 再 需要 时 可 以 随意 移 除 , 移 除 使 用 
removeAttribute 方法 ,语法 格式 如 下 : 


Session. removeAttribute ("变量 名 称 ") 


4. Session 对 象 的 主要 方法 


Session 对 象 的 主要 方法 如 表 6-6 所 示 。 


表 6-6 Session 对 象 的 主要 方法 















































序号 方 法 名 方法 说 明 
1 getAttribute(String name) 获取 与 指定 名 字 相 关联 的 Session 属性 值 
2 | getAttributeNames() 取得 Session 内 所 有 属性 的 集合 
3 | getCreationTime() 返回 Session 创建 时 间 , 最 小 单位 10 5s 
4 | getldO 返回 Session 创建 时 JSP 引擎 为 它 设 的 唯一 ID 号 
5 | getLastAccessedTime() 返回 此 Session 里 客户 端 最 后 一 次 访问 时 间 
6 | getMaxInactiveInterval() 返回 两 次 请 求 间隔 多 长 时 间 , 以 s 为 单位 
7 | getValueNames() 返回 一 个 包含 此 Session 中 所 有 可 用 属性 的 数组 
8 | invalidate() 取消 Session, fff Session 不 可 用 
9 | isNewO 返回 服务 器 创建 的 Session, 客 户 端 是 否 已 经 加 入 
10 | removeValue(String name) 删除 Session 中 指定 的 属性 
11 | setAttribute(String name, Object value) | 设置 指定 名 称 的 Session 属性 值 
12 | setMaxInactiveInterval() 设置 两 次 请 求 间隔 时 间 ， 以 s 为 单位 


置 生存 时 间 ,单位 是 s, 该 方法 的 原型 如 下 : 


5. Session 对 象 的 生命 周期 


Session 对 象 的 结束 有 几 种 情况 : 客户 端 关闭 浏览 器 ;Session 过 期 ;调用 invalidate 
方法 使 Session 失效 等 。 
Session 对 象 默认 的 生存 时 间 通 常 为 1800s, 可 以 通过 setMaxInactivelnterval 方法 设 


public void setMaxInactiveInterval (int n) 


实际 上 ,用 户 可 以 人 为 设置 Session 对 象 的 生存 时 间 ,达到 对 系统 安全 使 用 的 保护 。 
例如 , 当 一 个 用 户 在 使 用 系统 一 段 时 间 后 , 因 事 离开 ,. 且 没有 退出 系统 ,在 该 用 户 离开 的 这 
一 段 时 间 内 , 若 有 其 他 用 户 进行 恶意 操作 , 则 会 带 来 意 想 不 到 的 损失 。 以 下 程序 给 出 关于 
Session 生存 期 的 常用 设置 方法 。 


fi 6-8 Session 设置 方法 示例 。 


<% @page contentType- "text/html; charset=GB2312" %> 


<%@page import= "java.util. * "$» 
<html> 


165 


166 


Web 项 目 开发 实践 教程 


<body> 

<h2> Jspsession Page< /h2> 

会 话 标识 :<%=session.getId()%> 

<p> 创 建 时 间 :<$=new Date (session.getCreationTime())%> 

<p> 最 后 访问 时 间 :<%=new Date (session.getLastAccessedTime())%> 

<p> 是 不 是 一 次 新 的 对 话 ?<%=session.isNew()$> 

<p> 原 设置 中 的 一 次 会 话 持续 的 时 间 :<%=session.getMaxInactiveInterval ()%> 
< 名 -重新 设置 会 话 的 持续 时 间 --s> 

<%session.setMaxInactiveInterval (100);%> 

<p> 新 设置 中 的 一 次 会 话 持续 的 时 间 :<$= session.getMaxInactiveInterval ()%> 
<p> 属 性 UserName 的 原 值 :<s= session.getAttribute ("UserName") $> 

<s$- -设置 属性 UserName 的 值 --$> 

<% session.setAttribute ("UserName", "The first user!");%> 

<p> 属 性 UserName fi) jr [f :« $ — session.getAttribute ("UserName") $% > 

< /body» 

</html> 


程序 输出 如 图 6-45 所 示 o 


A) http://localhost 6090/ sessi onllethod. jsp 














S M Onr - P| rreraren] 学 


JspSession Page 

会 话 标识 : 5B188F596F9E5D1204D079E3B3515D10 
创建 时 间 : Wed Sep 01 00:01:19 CST 2010 

最 后 访问 时 间 : Wed Sep 01 00:04:48 CST 2010 
是 不 是 一 次 新 的 对 话 ? false 

原 设置 中 的 一 次 会 话 持续 的 时 间 : 1800 

新 设置 中 的 一 次 会 话 持续 的 时 间 : 100 

属性 UserName 的 原 值 : null 

属性 UserName 的 新 值 : The first user! 











图 6-45 Session 运行 结果 示意 图 


除了 以 上 Session 对 象 的 基本 使 用 方法 外 ,Session 对 象 还 有 一 个 重要 的 作用 .就 是 
记录 表单 信息 ,以 下 是 Session 记录 表单 信息 的 例子 。 

例 6-9 创建 登录 程序 ,login1. html 为 登录 界面 ,login1. jsp 为 登录 处 理 程序 ,使 用 
Session 保存 用 户 登 录 信 息 , 若 在 loginl. htm 中 输入 的 用 户 名 和 密码 都 为 admin, 则 登录 
成 功 , 程 序 转 到 登录 结果 文件 welcome. jsp, 和 否则 提示 登录 失败 ,系统 提示 5 秒 后 自动 转 
到 登录 页 面 ,要 求 程序 不 能 不 经 过 登录 而 直接 访问 登录 结果 网 页 welcome. jsp。 

程序 代码 如 下 : 


loginl.html: 
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<html> 
<head> 
<title> 用 户 登 录 < /title> 
</head> 
<body> 
< form method= "POST" action= "loginl.jsp"» 
<p> JH P! & :< input type="text" name- "user" size="18">< /p> 
<p> 818 :< input type="text" name- "pass" size="20">< /p> 
<p><input type="submit” value= "提交" name= "ok"> 
«input type-"reset" value= " 重 置 " name="cancel">< /p> 
</form 
</body> 
</html> 
Loginl.jsp: 
<% @page contentType= "text/html; charset=GB2312" %> 
<html> 
<head> < title» Session 应 用 演示 < /title>< /head> 
<$% 
if (request. getParameter ("user") != null && request. getParameter ("pass") ! = 
null) 
{ 
String strName- request .getParameter ("user"); 
String strPass- request.getParameter ("pass"); 
if (strName.equals ("admin") && strPass.equals ("admin ")) 
f 
session.setAttribute ("login","OK"); 
response.sendRedirect ("welcome.jsp"); 
} 
else 
{ 
out .println("<h2> 登 录 错 误 , 请 输入 正确 的 用 户 名 和 密码 </h2> ") ; 


5» 
</html> 


其 中 ,If 判断 获取 到 的 参数 user 的 值 不 为 空 并 且 pass 的 值 也 不 为 空 , 则 把 user 和 pass 
的 值 分 别 赋 给 strName 和 strPass。I 判断 strName 的 内 容 等 于 admin 并 且 strPass 的 内 
容 等 于 admin, 则 把 OK 设 定 到 login( 就 是 把 OK 赋值 给 login) 里 , 重 定向 到 ( 跳 转 到 ) 
welcome. jsp 页 面 ;否则 就 输出 else 里 要 打印 的 内 容 。 


welcome.jsp: 
«$6 page contentType- "text/html;charset-GB2312" $» 
<html> 
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<head><title> 欢 迎 光临 < /title> < /head> 
<body> 
<% 
String strLogin- (String) session.getAttribute ("login"); 
if (strLogin!=null && strLogin.equals ("OK")) 
{ 
out.println("<h2> 欢 迎 进入 我 们 的 网 站 1« /h2>"); 
} 
else 
{ 
out.println ("<h2> 请 先 登 录 ,谢谢 !< /h2>"); 
out.println ("<h2>5 秒 后 ,自动 跳 转 到 登录 页 面 !< /h2>"); 
response.setHeader ("Refresh","5;URL= loginl.htm"); 
} 
$> 
< /body> 
</html> 


代码 的 作用 是 获取 参数 login 的 值 并 且 强 转换 成 String( 字 符 串 ) 型 , 赋 给 strLogin, 
如 果 strLogin 不 等 于 空 并 且 strLogin 的 内 容 等 于 OK , 则 输出 * 欢 迎 进 入 我 们 的 网 站 !”， 
否则 输出 else 里 面 的 内 容 。 

如 果 不 是 通过 登录 ,直接 由 地 址 访问 welcome. jsp, 则 系统 提示 “请 先 登 录 , 谢 谢 !”， 
并 且 设置 定时 刷新 ,5 秒 后 跳 转 到 loginl. htm 页 面 。 

运行 结果 如 图 6-46 一 图 6-48 所 示 。 








PEDI - Microsoft Internet OCT 
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图 6-46 登录 页 面 
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6-48 非法 登录 页 面 
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在 登录 程序 中 还 可 以 使 用 验证 码 来 防止 黑客 侵入 系统 ,增加 系统 的 安全 性 。 

例 6-10 验证 码 的 生成 。 

例题 分 析 : 可 以 编写 程序 login. jsp ,image. jsp、checkLogin. jsp, 使 它们 组 成 输入 、 生 
成 .验证 验证 码 的 登录 界面 。 为 了 防止 非法 用 户 跳 过 登录 界面 而 在 浏览 器 的 地 址 栏 中 输 
入 应 用 系统 的 其 他 页 面 程序 进入 系统 ,在 登录 验证 正确 后 ,可 将 用 户 名 等 数据 存 入 
Session, 在 其 他 页 面 程序 中 从 Session 中 取出 ,如 取出 的 用 户 名 变量 值 为 null, 则 表明 用 
户 是 从 中 途 请 求 的 而 没有 经 过 登录 界面 。 

使 用 “记事 本 ”分 别 输 入 login. jsp、image. jsp 和 checkLogin. jsp 程序 并 存放 在 应 用 
目录 中 。 运 行 该 程序 进入 登录 页 面 ,输入 正确 的 验证 码 后 , 单 击 “ 登 录 ” 按 钮 后 显示 的 页 面 
如 图 6-49 所 示 。 






你 输入 的 验证 码 正确 1 你 输入 的 是 ，eycp; 
Session 中 保存 的 是 ，eycp 
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login.jsp: 
<%@page contentType= "text /html;charset- GBK"$ > 
<%@page language="java"% > 
<html> 
<head> 


«meta http- equiv= "Content- Type" content= "text/html; charset=GBK"> 
<title> 登 录 < /title» 
<style type="text/css"> 
</style> 
<script> 
function check] () { 
var OK= true; 
var message- ""; 
if (document .all ("username") .value=="") 
{message=message+ "用 户 名 不 能 为 空 !\n";OK= false; } 
if (document .all ("password") .value=="") 
(message message "密码 不 能 为 空 !\n";OK= false; } 
if (10K) alert (message) ; 
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if (OK) {document .£03.submit ();} 
H 
function UserNameFocus () { 
document . £03.username. focus () ; 
} 
function reLogin()( 
document .£04.submit () ; 
} 
</script> 
< /head» 
<body onload- "UserNameFocus () "> 
<span style= "visibility:hidden;"» 
< form name= "£04" method="post" action= "login.jsp" target= 
</form> < /span» 
<center> 
<%@ include file- "head bottom/top.html" %> 
<div> 用 户 登 录 </div> 
<table border= "0"> 
<tr><td> 
< form name= "£03" method= "post" action- "checkLogin.jsp" target="_self"> 
<table width- "250" border- "0" cellpadding- "0" cellspacing- "0"> 
«tr» 
«td width-" * " align="left"> 用 户 名 : 
<input type="text" name= "username" size="20">< /td> 
<td width- "14" align="center"> * </td> 
</tr> 
</table> 
<table width- "250" border= "0" cellpadding- "0" cellspacing="0"> 
«tr» 
«td width=" * " align-"left"» Wf &nbsp; &nbsp;liB : 
«input type="password" name- "password" size="20">< /td> 





«td width- "14" align="center"> * < /td» 
</tr> 
</table> 
<table width="315" border- "0" cellpadding- "0" cellspacing="0"> 
«tr» 
«td width-" * " align="left"> RIE: 
«input type="text” name- "checkcode" style="width: 54px;" /»« /td» 
< td» < img src=" image. jsp" style= "height: 20; width: 60; border: none; " > 
< /td> 
<td><input type= "button" value= "验证 码 不 清楚 " onClick- "reLogin();"» 
< /td> 
</tr> 
</table> 
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<br> 

<table width- "260" border- "0" cellpadding- "0" cellspacing- "0"» 
<tr> 

<td width= "100%" align="right"> 

<input type="button" value= " 登 录 " onclick- "checkl();" />< /td» 
</tr> 

</table>< /form> 

</td></tr> 

</table> 

<%@ include file- "head bottom/bottom.html" %> 

</center> 

< /body» < /html> 


image.jsp: 
«$6 page contentType- "text/html; charset=GBK"% > 
< % @ page import- "java.awt. * ,java.awt. image. * , java.util. * , javax. imageio. 
六 
<4! 
Color getRandColor (int fc, int bc) { // 给 定 范围 获得 随机 颜色 
Random random= new Random () ; 
if (fc> 255) fc-255; 
if (bc> 255) bc-255; 
int r= fc+ random.nextInt (bc- fc) ; 
int g=fc+ random.nextInt (bc- fc) ; 
int b-fc* random.nextInt (bc- fc) ; 
return new Color (r,g,b) ; 
) 
%> 
<% 
response.setContentType ("image/jpeg") ; 
out.clear(); // 清 除 页 面 缓存 
// 在 内 存 中 创建 图 像 
int width= 60, height- 20; 
BufferedImage image- new BufferedImage (width, height, BufferedImage. TYPE INT - 


RGB); 

Graphics g- image.getGraphics():; // 获 取 image 的 作 图 对 象 
Random random-new Random() + // 生 成 随机 类 

// 设 定 背 景色 


g.setColor (getRandColor (130, 250)); 

g.fillRect (0,0,width, height); 

// 设 定 字体 

g.setFont (new Font ("Times New Roman", Font. ITALIC, 18)) ; 

// 随 机 产生 155 条 干扰 线 , 使 图 像 中 的 验证 码 不 易 被 其 他 程序 探测 到 


for (int i=0;i<155;i++){ 
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g.setColor (getRandColor (120, 250) ) ; 
int x-random.nextInt (width); 
int y-random.nextInt (height); 
int xl- random.nextInt (12) ; 
int yl- random.nextInt (12) ; 
g.drawLine (x, y, x* x1, y* y1); 
H 
// 取 随机 产生 的 验证 码 (4 位 ) 
String source= "0123456789abcedfghijklmopqrstuvwxuyz"; 
String sourcel- "ABCEDFGHIGKLMNOPQRSTUVWXYZ" ; 
int StrLen- source.length()-1; 
String sRand-""; 
for (int i=0;i<4;i++){ 
int il-random.nextInt (StrLen) ; 
String sl-source.substring(il,il* 1); 
sRand- sRand* s1; 
int rl- random.nextInt (random.nextInt (250)); 
int gl- random.nextInt (random.nextInt (250)); 
int bl- random.nextInt (random.nextInt (250)); 
g.setColor (new Color (rl,gl,bl)); 
g.drawString(s1,13* i*6,16-1); 
} 
session.setAttribute ("rand", sRand) ; 
g.dispose(); 
// 输 出 图 像 到 页 面 
ImageIO.write (image, "JPEG", response .getOutputStream()); 
%> 


checkLogin.jsp: 
<%@page contentType- "text /html;charset- GBK"$ > 
«html» 
<head> 


// 设 置 一 种 前 景色 
// 输 出 一 位 验证 码 


// 将 验证 码 存 人 Session 
// 图 像 生效 


<meta http- equiv- "Content- Type" content= "text/html; charset=GBK"> 


<title> 用 户 名 密码 验证 码 校 验 < /title> 

< /head> 

<body> 

<% 

String username, password, CHKCode; 

username- request .getParameter ("username"); 
password= request .getParameter ("password") ; 

CHKCode- request .getParameter ("checkcode") ; 

String CheckCode- (String) session. getValue ("rand"); 


// 取 登录 名 
// 取 输入 的 密码 
// 用 户 输入 的 验证 码 
// 取 Session 中 保存 的 验 
证 码 


if (CHKCode.equals (CheckCode) ) t // 用 户 输入 的 验证 码 与 Session 中 的 相等 
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// 实 际 中 ,用 户 名 和 密码 要 与 数据 库 中 比较 


session.putValue ("username", username) ; // 用 户 名 保存 在 Session 中 
session.putValue ("password", password) ; // 密 码 保存 在 Session 中 
&> 


<div style- "text- align:centery"> 你 输入 的 验证 码 正确 ! 
你 输入 的 是 :<s=CHKCodes> ; Session 中 保存 的 是 :<%=CheckCode% >< /div> 
<% 
Jelset 
$5 
<div style- "text-align:center;"> 你 输入 的 验证 码 不 正确 ! 
你 输入 的 是 :<%=CHKCode% > ; Session 中 保存 的 是 :<%$=CheckCode%>< /div> 
<% 
} 
&> 
€ /body» 
< /html> 


在 login. jsp 中 ,语句 “一 img src =" image. jsp" style="height; 20; width: 60; 
border: none;" 二 ”用 来 显示 验证 码 的 图 像 , 图 像 文件 是 image. jsp. 93 4b. login. jsp 程序 
中 还 用 到 了 top. html 和 bottom. html 显示 页 头 和 页 尾 . 要 注意 它们 存放 的 文件 夹 ,否则 
login. jsp 不 能 正常 编译 运行 。 

image. jsp 程序 用 语句 “response. setContentType("image/jpeg"); ”告诉 客户 端 要 接 
收 的 文档 MIME 类 型 为 image/jpeg, 然 后 在 服务 器 的 缓存 中 生成 一 幅 有 4 个 字符 验证 码 
的 图 像 并 发 送 到 客户 端 。 用 语句 “session. setAttribute("rand" ,sRand) ;” 将 验证 码 存 人 
Session, 保 证 了 从 登录 页 面 转 到 其 他 页 面 后 依然 可 以 获取 该 验证 码 。 

checkLogin. jsp 程序 用 语句 “request. getParameter("checkcode");” 取 得 用 户 在 登录 
界面 输入 的 验证 码 , 用 语句 “(String)Session. getValue("rand");” 取 得 Session 中 保存 的 
验证 码 。 两 者 比较 ,可 进一步 防止 非法 用 户 的 侵入 。 


6.6.4 application 对 象 


application 对 象 实现 了 用 户 间 数 据 的 共享 ,可 存放 全 局 变量 。 它 开始 于 服务 器 的 启 
动 ,消失 于 服务 器 的 关闭 。 在 此 期 间 , 此 对 象 将 一 直 存 在 .在 不 同 用 户 连接 服务 器 的 过 程 
中 ,可 以 对 此 对 象 的 同一 属性 进行 操作 ; 且 在 任何 地 方 对 此 对 象 属性 的 操作 ,都 将 影响 到 
其 他 用 户 对 此 的 访问 。 服 务 器 的 启动 和 关闭 决定 了 application 对 象 的 生命 。 它 是 
ServletContext 类 的 实例 。 

application 对 象 主要 方法 

不 同 用 户 的 Session 对 象 互相 不 同 , 而 所 有 用 户 的 application 对 象 是 共享 的 ,因此 
application 对 象 负责 提供 应 用 程序 在 服务 器 中 运行 时 的 一 些 全 局 信息 。 服 务 器 启动 时 就 
创建 一 个 application 对 象 . 当 一 个 客户 访问 服务 器 上 的 一 个 JSP 页 面 时 ,JSP 引擎 就 为 该 
客户 分 配 这 个 application 对 象 , 所 有 客户 共用 一 个 application 对 象 。application 对 象 主 
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要 方法 如 表 6-7 所 示 。 
表 6-7 application 对象 的 主要 方法 
































序号 方 法 名 方法 说 明 
1 getAttribute(String name) 返回 给 定名 的 属性 值 
2 getAttributeNames() 返回 所 有 可 用 属性 名 的 枚 举 
3 setAttribute( String name, Object object) 设 定 属性 的 属性 值 
4 removeAttribute(String name) 删除 一 个 属性 及 其 属性 值 
5 getServerInfo() 返回 JSP(SERVLET) 引 擎 名 及 版 本 号 
6 getRealPath(String path) 返回 一 个 虚拟 路 径 的 真实 路 径 
了 getInitParameter( String name) 返回 name 属性 的 初始 值 


例 6-11 使 用 application 对 象 编程 实现 一 个 简易 的 留言 板 。 

程序 分 析 : 在 本 例 中 ,客户 通过 submit. jsp 向 messagePane. jsp 页 面 提交 姓名 、 留 言 
标题 和 留言 内 容 ,messagePane. jsp 页 面 获取 这 些 信息 之 后 ,用 同步 方法 将 这 些 内 容 添加 
到 一 个 向 量 中 ,然后 将 这 个 向 量 再 添加 到 application 对 象 中 。 当 用 户 查看 留言 板 时 ， 
showMessage. jsp 负责 显示 所 有 客户 的 留言 内 容 , 即 从 application 对 象 中 取出 向 量 , 然 后 
遍历 向 量 中 存储 的 信息 。 

Java 的 java. util 包 中 的 Vector 类 负责 创建 一 个 向 量 对 象 : Vector a=new Vector(),a 
可 以 使 用 addCObject o) 把 任何 对 象 添加 到 向 量 的 末尾 ,向 量 的 大 小 会 自动 增加 。 可 以 使 用 
add(int index, Object o) 把 任何 对 象 添加 到 向 量 的 指定 位 置 。 可 以 使 用 elementAt(int 
index) 获 取 指定 索引 处 的 向 量 的 元 素 (索引 初始 位 置 是 0);a 可 以 使 用 方法 size() 获 取向 量 
所 有 的 元 素 的 个 数 。 具 体 实现 代码 如 下 : 


submit.jsp: 
«$6 page contentType- "text /html;charset- GB2312" %> 
<HTML> < BODY» 
< FORM action= "messagePane. jsp" method="post" name- "form"> 
<P> 输 入 您 的 名 字 : 
<INPUT type="text" name= "peopleName"> 
<BR> 输 入 您 的 留言 标题 : 
<INPUT type="text” name="Title"> 
<BR> 输 入 您 的 留言 : 
< BR» < TEXTAREA name= "messages" ROWs- "10" COLS- 36 WRAP- "physical"» 
< /TEXTAREA» 
« BR» « INPUT type="submit" value= "提交 信息 "name= "submit"» 
</FORM> 
< FORM action- "showMessage.jsp" method="post" name= "forml"> 
< INPUT type="submit" value- "查看 留言 板 " name- "look" 
</FORM> 
</BODY> < /HTML> 
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messagePane.jsp: 
«$6 page contentType- "text/html;Charset-GB2312" %> 
«&6 page import-"java.util. * " $> 
<HTML> 
<BODY> 
«$! Vector v=new Vector (); 
ServletContext application; 
synchronized void sendMessage (String s) 
{ application-getServletContext (); ; 
v.add(s); 
application.setAttribute ("Mess",v); 


&> 
<%String name= request .getParameter ("peopleName") ; 
String title= request .getParameter ("Title"); 
String messages- request .getParameter ("messages"); 
if (name==null) 
{  name-"guest"- (int) (Math.random() * 10000) ; 
) 
if(title--null) 
{ title- "无 标题 "; 
} 
if (messages== null) 
{ ”messages=" 无 信息 "; 
} 
String time-new Date () .toString(); 





String s="#"+name+ "#"+title+ "#"+time+ "#"+messages+ "#"; 
sendMessage (3) ; 
out.print ("您 的 信息 已 经 提交 !"); 
$» 
« A HREF- "submit.jsp"> 返 回 
<A HREF- "showMessage.jsp"> 查 看 留言 板 
< /BODY> < /HTML> 


showMessage.jsp: 
<%@page content Type= "text/html;Charset-GB2312" $» 
<%@page import= "java.util. * "> 
< HIML> <BODY> 
<% Vector v= (Vector)application.getAttribute ("Mess") ; 
out.print ("« table border-2» "); 
out.print ("<tr>"); 
out.print ("<td bagcolor- cyan» "+ "留言 者 姓名 "+"< /td» "); 
out.print ("<td bagcolor-cyan» "+ "留言 标题 "+"< /td» ") ; 
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out.print ("< td bagcolor=cyan> "+ "留言 时 间 "+ "< /td» ") ; 
out.print ("<td bagcolor=cyan> "+ "留言 内 容 "+"< /td» ") ; 
out.print ("< /tr>"); 
for (int i=0;i<v.size();i++) 
{  out.print ("<tr>"); 
String message= (String) v.elementAt (i); 
StringTokenizer fenxi=new StringTokenizer (message, "#")7 
out.print ("<tr>"); 
int number- fenxi.countTokens(); 
for (int k-0;k« number; k* * ) 
{ String str=fenxi.nextToken (); 
if (k< number- 1) 
{ out.print ("<td bgcolor- cyan» "+ str* "< /td» ") ; 
} 
else 
{out.print ("< td» < TextArea rows=3 cols=12> "+ str+ "< /TextArea> 
€«/td»"); ) 
) 
out.print("« /tr»"); 
} 
out.print ("</table>"); 
> 
< /BODY> < /HTML> 


6.7 JSP 中 的 文件 操作 





服务 器 有 时 需要 将 客户 提交 的 信息 保存 到 文件 或 根据 客户 的 要 求 将 服务 器 上 的 文件 
的 内 容 显示 到 客户 端 。JSP 通过 Java 的 输入 输出 流 实现 文件 的 读 写 操 作 。 

例 6-12 在 JSP 页 面 中 实现 文件 上 传 。 

分 析 : 文件 上 传 是 指 将 客户 机 上 的 文件 通过 网 络 传送 到 服务 器 上 。 客 户 机 上 的 文件 
指定 和 上 传 是 通过 HTML 的 表单 实现 的 ,如 程序 S_File. jsp 中 name= "f1" ff) — form 
表单 示例 。 其 中 ,action= "FileAccept. jsp" 表 示 服 务 器 上 接收 和 处 理 上 传 的 文件 的 程序 
是 与 S_File. jsp 在 同一 目录 下 的 FileAccept. jsp; <form > K H HJE E enctype 的 值 必须 
为 multipart/form-data, 一 form 二 体 中 一 input 二 标记 的 属性 type 的 值 必须 是 file。S_ 
File. jsp 运行 后 的 界面 如 图 6-50 所 示 : 假定 要 上 传 的 文件 是 A. txt, 可 以 单 击 “ 浏 览 ” 按 
钮 ,选择 客户 机 文件 夹 中 的 A. txt 文件 ,然后 单 击 * 上 传 ”按钮 则 文件 被 发 送 到 服务 器 并 启 
动 FileAccept. jsp 程序 进行 接收 和 处 理 。 客 户 端 发 送 到 服务 器 的 数据 一 般 有 两 大 部 分 : 
一 部 分 是 HTTP 数据 头 , 一 部 分 是 HTTP 数据 体 。 被 传送 的 文件 (如 A. txt) 包 含 在 数据 
体 中 。FileAccept.jsp 中 的 语句 InputStream in = request. getInputStream O ;就 是 使 用 
JSP 内 置 对 象 request 的 方法 getInputStream() 获 取 字 节 输 入 流 . 用 于 读 入 客户 端 发 送 来 
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的 数据 。 语 句 FileOutputStream o— new FileOutputStream(new File(". /B. txt")) 可 以 
生成 一 字 节 输 出 流 , 将 数据 输出 到 服务 器 安装 目录 下 的 B. txt 文件 中 。 
假定 客户 端 计算 机 的 F 盘 上 有 A. txt 文件 。A. txt 文件 的 内 容 是 : 
欢迎 使 用 HTML JavaScript JSP 语言 进行 Web 程序 开发 。 
这 是 文件 上 传 的 例子 。 

使 用 “记事 本 ”分 别 输入 S_File. jsp 和 FileAccept. jsp 程序 并 存放 在 应 用 目录 中 。 运 
行 该 程序 。 在 S_File. jsp Xt iii , 单 击 * 浏 览 ? 按 钮 ,选择 A. txt 文件 后 单 击 * 上 传 ”按钮 , 则 
将 上 传 的 数据 保存 到 服务 器 的 安装 目录 下 的 B. txt 文件 中 。S_File. jsp 页 面 及 B. txt X 
件 的 内 容 如 图 6-50 所 示 。 


XPO RED seo HRW IA ”| Æ > 
pare -Oa GEAR mx ” form-data; name-"sFile"; 


at: 














AR. txt 
Content-Type: text/plain 
REP aserne JSP 语 言 进行 Web 程序 开发 。 


|-----------------------------: 7da2fd2180236 
Content-Disposition: form-data; name="go" 













E] [F 7da2td2188236-- zi 


6-50 文件 上 传 





可 以 看 出 ,相对 A. txt 文件 的 内 容 ,B. cxt 文件 中 前 面 多 了 4 行 .结尾 多 了 5 行 。 这 是 
因为 使 用 HTTP 上 传 文件 时 ,上 传 的 数据 中 除了 上 传 的 文件 内 容 外 还 包括 HTTP 头 数 
据 。 可 以 在 FileAccept. jsp 程序 中 增加 进一步 处 理 B. txt 文件 的 语句 : 

(1) 打开 B. txt 文件 。 

(2) 读 出 被 传送 文件 的 文件 名 A. txt, 

(3) 读 出 被 传送 文件 的 内 容 。 

(4) 以 被 传送 文件 的 文件 名 A. txt 保存 到 服务 器 上 。 

具体 实现 代码 如 下 : 


S File.jsp: 
« $6 page contentType- "text/html;charset-GBK"$ > 
«$6 page language- "java" 当 > 
«html» 
<head> 
«meta http- equiv- "Content- Type" content- "text/html; charset-GBK"» 
«title» E f£ X fF« /title» 
< /head» 
<body> 
<div> 上 传 文件 :< /div> 
< form name= "£1" action= "FileAccept.jsp" method="post" enctype- "multipart/form 
- data"» 
«input type- "file" name- "sFile" size- "20" /> 
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<input type="submit" name- "go" value= "上 传 "> 
</form> 
</body> 
</html> 
FileAccept.jsp: 
«$6 page contentType- "text/html;charset-GBK"$ > 
« &6 page language- "java"$ > 
«&6 page import-"java.io.* "$> 
«html» 
<head> 
<meta http- equiv= "Content- Type” content= "text/html; charset=GBK"> 
< /nead> 
<body> 
<% 
try{ 
InputStream in= request .getInputStream() 
FileOutputStream o= new FileOutputStream(new File("./B.txt")); 
byte b[]=new byte[1000]; 
int n; 
while ((n=in.read (b)) !=- 1) { 
o.write (b,0,n); 
} 
o.close(); 
in.close(); 
out.print ("文件 已 上 传 "); 
}catch (Exception ee) {} 
$» 
< /body» 
</html> 
例 6-13 在 JSP 页 面 中 实现 文件 下 载 。 
文件 下 载 程序 如 downLoad. jsp。 该 程序 将 服务 器 安装 目录 下 的 “实验 . txt" 文 件 下 载 到 


客户 端 。 语 句 “response. setHeader( " Content-disposition" . " attachment; filename 一 "十 F_N_ 
C);? 设 置 HTTP 应 答 头 的 Content-disposition JB TET (B Jg * "attachment; filename— "--F N - 
C”, 它 通知 客户 端 浏 览 器 打开 * 文 件 下 载 ? 对 话 框 将 服务 器 端 发 送 来 的 HTTP 数据 体 作 为 文 
件 内 容 保存 起 来 。 语 名 “OutputStream o= response. getOutputStream();” 即 是 获得 HTTP 
数据 体 的 字 节 输出 流 ,通过 它 将 文件 的 内 容 发 送 到 客户 端 。 

使 用 “记事 本 ”输入 downLoad. jsp 程序 并 存放 在 应 用 目录 中 。 注 意 , downLoad. jsp 
程序 中 ,try 语句 前 的 内 容 须 在 一 行 中 输入 ,中 间 不 能 有 回 车 换行 。 否 则 . 回 车 换行 数据 
会 一 并 发 往 客户 端 而 作为 下 载 文 件 的 一 部 分 被 保存 。 程 序 运 行 后 ,打开 “文件 下 载 ” 对 话 
框 ,如 图 6-51 所 示 。 


downLoad. jsp: 
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<% @ page contentType =" text/html; charset = GBK"$ > <% @ page language =" java"$ > 
<%@page import="java.io. * "5><% 

try{ 
String fileName- "实验 .txt"; 
File f-new File (fileName); // 要 下 载 的 文件 ,位 于 resin 的 安装 目录 中 
FileInputStream in=new FileInputStream(f); 
// 防 止 下 载 时 文件 名 中 有 中 文 出 现 乱码 将 其 用 UTF- 8 编码 
String F_N C=java.net.URLEncoder .encode (fileName, "UTF- 8") ; 
response.setHeader ("Content- disposition", "attachment; filename="+F N C); 
long fileLength- f.length(); 
String length- String.valueOf (fileLength); 
response.setHeader ("Content- Length", length) ; 
OutputStream o= response.getOutputStream(); 
byte b[]=new byte [500]; 
int n=0; 
while ((n=in.read(b)) !=-1){ 
o.write (b,0,n)7 
} 
in.close(); 
o.close(); 

}catch (Exception ee) {} 

$> 


您 起 打开 或 保存 此 文件 吗 ? 


目 名 称 : TB out 
类 型 ， 文 本 文档 ，366 FP 
J: localhost 














HFW J[ EFO 
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6.8 JSP 中 汉字 乱码 处 理 





对 于 初学 ISP 的 人 来 说 ,最 头痛 的 就 是 辛 辛 苦 苦 编写 的 程序 ,好 不 容易 调试 成 功 之 
后 ,显示 的 页 面 中 却 是 乱码 。JSP 中 可 能 出 现 的 乱码 共有 三 处 ,它们 是 : 

(1) JSP 页 面 显示 乱码 ,如 果 JSP 文件 开始 没有 指明 代码 所 使 用 的 编码 方式 ,JSP 在 
页 面 中 的 汉字 将 变 成 乱码 。 

(2) 表单 提交 中 文 时 出 现 乱码 。 表 单数 据 在 提交 后 ,接收 时 必须 进行 特殊 处 理 ,否则 
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提交 上 来 的 数据 也 是 乱码 。 
(3) 数据 库 使 用 时 显示 乱码 ,这 种 乱码 的 处 理 方法 将 在 第 7 章 进行 讲解 。 
1. JSP 页 面 显示 乱码 


JSP 页 面 显示 乱码 是 由 于 服务 器 使 用 的 编码 方式 不 同和 浏览 器 对 不 同 的 字符 显示 结 
果 不 同 导致 的 。 下 面 的 程序 是 一 个 最 简单 的 JSP 程序 ,运行 时 将 显示 图 6-52 所 示 的 


<head> 
<title>JSP 的 中 文 处 理 < /title> 
</head> 
<body> 
<%out.print ("JSP 的 页 面 显示 乱码 的 处 理 ");$> 
</body> 
</html> 


解决 办 法 很 简单 ,在 JSP 页 面 中 指定 编码 方式 即 可 ,一 般 将 编码 方式 指定 为 GB2312 
即 可 。 即 在 页 面 的 第 一 行 前 加 上 : 二 %@ page contentType =" text/html; charset = 
GB2312"% 二 ,就 可 以 消除 乱码 。 结 果 如 图 6-53 Bran. 


Ee 


© 





图 6-52 乱码 显示 图 6-53 正常 显示 结果 


2. 表单 提交 中 文 时 出 现 乱码 的 处 理 

表单 提交 英文 字符 能 正常 显示 ,一旦 提交 中 文 时 就 会 出 现 乱 码 。 其 原因 是 浏览 器 默 
认 使 用 UTF-8 编码 方式 发 送 请 求 , UTF-8 编码 方式 是 在 互联 网 上 使 用 最 广 的 一 种 
unicode 的 实现 方式 ,而 汉字 显示 则 使 用 GB2312 编码 方式 ,UTF-8 和 GB2312 编码 方式 
表示 字符 是 不 一 样 的 .这样 就 出 现 了 不 能 识别 字符 。 

处 理 方式 有 以 下 两 种 : 

第 一 种 方式 ,通过 request. setCharacterEncoding ("GB2312") 对 请 求 进行 统一 编码 ， 
就 实现 了 中 文 的 正常 显示 o 

例 6-14 表单 乱码 处 理 的 第 一 种 方式 示例 。 

表单 提交 页 面 : 


<html> 
<head> 
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<title> JSP 的 中 文 处 理 1< /title> 
</head> 
<body> 
< form name= "forml" method="post" action= "process. jsp"> 
«input type="text” name= "name"» 
<input type="submit" name- "Submit" value- "Submit"» 
</form> 
< /body> 
« /html» 


表单 处 理 页 面 : 


<%@page contentType= "text/html; charset=GB2312"% > 
<html> 
<head> 
<title>gsP 的 中 文 处 理 < /title> 
</head> 
<body> < $= request.getParameter ("name") % > 
< /body» 
</html> 


第 二 种 方式 是 接受 参数 时 进行 编码 转换 。 
表单 提交 页 面 : 


<html> 
<head> 
«title» JSP 的 中 文 处 理 < /title> 
< /head» 
<body> 
< form name- "forml"”method= "post" action- "process.jsp"> 
<input type- "text" name- "name"> 
<input type="submit” name- "Submit" value= "Submit"» 
</form> 
< /body> 
</html> 


表单 处 理 页 面 : 


«$6 page contentType- "text/html; charset=GB2312"%> 
<html> 
<head> 
<title>JSP 的 中 文 处 理 < /title> 
</head> 
<body> 


<% String s= new String (request. getParameter ("name"). get Bytes ("ISo- 8859-1"), 


GB2312"); 


out.print (s) 
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$5 
</body> 
« /html» 


除 此 之 外 ,还 有 很 多 处 理 乱码 的 方法 ,读者 可 以 借助 互联 网 及 其 他 工具 探索 ,在 此 不 


再 一 一 次 述 。 
6.9 案例 实践 


6.9.1 案例 需求 说 明 


编程 模拟 一 个 简单 网 上 购物 过 程 ,首先 提醒 用 户 输入 名 字 连 接 到 商场 ,如 图 6-54 


所 示 。 





单 击 送出 按钮 ,页 面 跳 转 到 first. jsp 页 面 ,让 顾客 输 ELE necare cones oe 
入 要 购买 的 商品 ,然后 单 击 “ 发 送 "按钮 ,连接 到 结账 处 ， | 输入 您 的 和 名字， 连接 到 中 央 商 场 。 
如 图 6-55 所 示 。 

最 后 跳 转 到 结账 处 ,显示 前 面 用 户 输入 的 姓名 和 商 
品 , 如 图 6-56 所 示 o 





图 6-54 输入 姓名 页 面 


[SERIE eUam] 
这 里 是 结账 处 。 


BIDE) htpyiocahos:60801rst jsp 








这 里 是 中 央 商 场 , 请 输入 您 购买 的 商品 ， 连 接 到 结账 处 。 顾客 的 姓名 是 ，Jerry 
[ae il) 您 选 购 的 商品 是 ，cakes 


图 6-55 输入 商品 页 面 图 6-56 ”结账 处 页 面 


6.9.2 技能 训练 要 点 


在 电子 商务 平台 开发 中 ,一 个 重要 的 关键 点 就 是 电子 商务 平台 如 何 记 录 下 客户 端的 
状态 ,在 以 JSP 为 开发 技术 的 动态 网 页 开发 中 ,是 使 用 Session 内 置 对 象 达 到 这 个 目的 


的 ,本 案例 主要 就 Session 内 置 对 象 读 写 方法 及 值 的 传递 过 程 进 行 训练 。 
6.9.3 案例 实现 





本 案例 涉及 三 个 页 面 .分 别 为 输入 姓名 页 面 、 输 入 商品 页 面 和 结账 处 页 面 , 具 体 实现 


代码 如 下 。 
输入 姓名 页 面 (example. jsp) : 
<%@page contentType- "text/html;charset—GB2312"%> 
<html> 
<body> 
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«&session.setAttribute("custom","B Zr"); // 将 顾客 对 象 加 入 Session 中 ,并 指定 关键 字 
为 custom 

%> 

<p> 输 入 您 的 名 字 , 连 接 到 中 央 商 场 。 

< form action= "first.jsp" method=post name= form» 

«input type="text" name- "namel"> 

«input type="submit" name- "submit" value=" Hi "> 

</form> 

< /body» 

« /htnl» 


输入 商品 页 面 (first. jsp) : 


<% page contentType- "text/html; charset=GB2312"% > 
<html> 
<body> 
<%String nm-request.getParameter ("namel") ; 
session.setAttribute ("name", nm) 7 //# nm 对 象 加 入 session 中 ,并 指定 关键 字 为 nane 
%> 
<p> 这 里 是 中 央 商 场 ,请 输入 您 购买 的 商品 ,连接 到 结账 处 。 


< form action 





"count.jsp" method- post name= form» 
<input type="text" name- "buy"» 

«input type="submit" name- "submit" value- "送出 "> 
«/form» 

</body> 

</html> 


输入 结账 处 页 面 (count. jsp) : 


<%@page contentType- "text/html;charset=GB2312"%> 
<%! public String getString (String s) 
{ 
if (s==null) 
sc 
try{ 
byte b[]=s.getBytes ("ISO- 8859- 1") ; 
s=new String (b); 
) 
catch (Exception e) {} 
return s; 
H 
> 
<html> 
<body> 
<% String pa- request .getParameter ("buy") ; 
session.setAttribute ("goods", pa) ://# mm 对 象 加 入 Session 中 ,并 指定 关键 字 为 name 
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i» 

<p> 这 里 是 结账 处 。 

<% String cus= (String)session.getAttribute ("custom"); 
String nam= (String) session.getAttribute ("name") ; 
String goo= (String) session.getAttribute ("goods") ; 
nam= getString (nam); 
goo-getString (goo) ; 

$5 

<br> 

«p» «$- cust» AY lk % i :< %=nams > 

<p> 您 选 购 的 商品 是 :<$=goos> 

< /body> 


通过 以 上 案例 的 训练 ,读者 可 以 清楚 地 体会 到 数据 在 页 面 与 页 面 之 间 跳 转 时 的 传递 
过 程 ,学 会 在 页 面 跳 转 时 如 何 记录 客户 端的 信息 。 


本 章 小 结 


本 章 主要 讲解 了 Web 开发 及 JSP 的 相关 知识 ,首先 对 比 了 静态 与 动态 的 Web 页 面 ， 
然后 对 动态 Web 开发 语言 JSP 做 了 系统 的 介绍 ,读者 通过 本 章 的 学 习 , 可 以 学 会 JSP 开 
发 环境 安装 与 配置 ,掌握 JSP 页 面 基本 结构 及 运行 过 程 ,学 会 使 用 JSP 基本 语法 和 内 置 
对 象 进行 相应 的 编程 ,并 了 解 JSP 编程 中 的 文件 操作 及 汉字 乱码 处 理 。 


本 章 习 题 
一 、 选 择 题 
1. 可 以 在 以 下 ( ) 标 记 之 间 插 入 Java 程序 片段 。 
A. <% 和 A> B. <% 和 /> 
C. </ 和 > D. <% fm 
2. 可 以 在 以 下 ( ) 标 记 之 间 插 入 变量 与 方法 声明 。 
A. <% 和 o B. <%! 和 A> 
C. </ 和 44— D. <% f! 


3. 下 列 ( ) 注 释 为 隐藏 型 注释 。 
A. 二 ! 一 注释 内 容 [二 %= 表 达 式 KYO] — 
B. 二 ! 一 注释 内 容 -> 
C. 二 % 一 注释 内 容 -> 
D. <!-1<%=RKEX H>]—-> 
4. 下 列 变量 声明 在 ( ) 范 围 内 有 效 。 


<%! Date dateTime; 
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int countNum; 
> 
AL 从 定义 开始 处 有 效 ,客户 之 间 不 共享 
B. 在 整个 页 面 内 有 效 , 客 户 之 间 不 共享 
C. 在 整个 页 面 内 有 效 , 被 多 个 客户 共享 
D. 从 定义 开始 处 有 效 ,被 多 个 客户 共享 
5. 在 “二 %1” 和 “% 二 "标记 之 间 声 明 的 Java 的 方法 称 为 页 面 的 成 员 方 法 ,其 在 ( ) 


有 效 。 
A. 从 定义 处 之 后 B. 在 整个 页 面 内 
C. 从 定义 处 之 前 D. 不 确定 
6. “<A — "Wi" >" hie Z B CR C ) .可 以 直接 输出 其 值 。 
A. 变量 B. Java 表达 式 C. 字符 串 D. 数字 


7. JSP HUM ATLA TES <%=" AS % > i R Java 表达 式 , 直 接 输出 Java 表 
PSC, ALR <%= bie f F FF Ii C Xs 


A. 可 以 有 空格 B. 不 可 以 有 空格 
C. 必须 有 空格 D. 不 确定 
8. FRC — )IAT ISP 动作 标记 。 
A. <jsp: param> B. <jsp: plugin> 
C. <jsp: useBean> D. <jsp: javaBean> 


9. Page 指令 用 于 定义 JSP 文件 中 的 全 局 属性 ,下 列 关于 该 指令 用 法 的 描述 不 正确 
的 是 ( Js 
A. <%@ page 4 EHI T S&P JSP 页 面 
B. 可 以 在 一 个 页 面 中 使 用 多 个 二 %@ page 96738 
C. 为 增强 程序 的 可 读 性 ,建议 将 二 %@ page % 二 指令 放 在 ISP 文件 的 开头 ,但 
不 是 必需 的 
D. <%@ page %% 过 指令 中 的 属性 只 能 出 现 一 次 
10. 对 于 JSP 中 的 声明 二 %! > AEE RAD AC ) 。 
A. 一 次 可 声明 多 个 变量 和 方法 ,只 要 以 “;” 结 尾 就 行 
B. 一 个 声明 仅 在 一 个 页 面 中 有 效 
C. 声明 的 变量 将 作为 局 部 变量 
D. 在 该 声明 中 声明 的 变量 将 在 JSP 页 面 初始 化 时 初始 化 
11. JSP 的 Page 编译 指令 的 属性 Language 的 默认 值 是 ( Yi 
A. Java B. € C. C£ D. SQL 
12. Include 指令 用 于 在 JSP 页 面 静 态 插 入 一 个 文件 ,插入 文件 可 以 是 JSP 页 面 、 
HTML 网 页 ,文本 文件 或 一 段 Java 代码 ,但 必须 保证 插入 后 形成 的 文件 是 ( Js 
A. 一 个 完整 的 HTML 文件 B. 一 个 完整 的 JSP 文件 
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13. 


C. 一 个 完整 的 TXT 文件 D. 一 个 完整 的 Java 源 文件 
<jsp: useBean id— "bean 的 名 称 " scope="bean AYA BGG AA" class="4 4%. 类 


4" [> SMEs iU P «scope 的 值 不 可 以 是 ( N 


14. 


name), 


21. 


22. 


23. 


A. page B. request C. session D. response 
要 运行 ISP 程序 ,下 列 说 法 不 正确 的 是 ( 

A. 服务 器 端 需要 安装 Servlet 容器 ,如 Tomcat 等 

B. 客户 端 需要 安装 Servlet 容器 ,如 Tomcat 等 

C. 服务 器 端 需 要 安装 JDK 

D. 客户 端 需要 安装 浏览 器 ,如 TE 等 


+ FAC ) 可 以 准确 地 获取 请 求 页 面 的 一 个 文本 框 的 输入 (文本 框 的 名 称 为 


A. request. getParameter(name) 
B. request. getParameter(* name") 
C. request. getParameterValues( name) 


D. request. getParameterValues(* name") 


. 使 用 response 对 象 进行 重 定向 时 ,使 用 的 方法 是 ( Ns 


A. getAttribute B. setContentType 
C. sendRedirect D. setAttribute 


. session 对 象 中 用 于 设 定 指定 名 字 的 属性 值 .并 且 把 它 存 储 在 session 对 象 中 的 


Je 
A. setAttribute B. getAttributeNames 
C. getValue D. getAttribute 
.在 application XJ% PC “) 方 法 可 以 获得 application 对 象 中 的 所 有 变量 名 。 
A. getServerInfo B. nextElements() 
C. removeAttribute D. getRealPath 


.以 下 ( ) 对 象 提供 了 访问 和 放置 页 面 中 共享 数据 的 方式 。 


A. pageContext B. response C. request D. session 


.调用 getCreationTime() 可 以 获取 session 对 象 创建 的 时 间 , 该 时 间 的 单位 是 ( Ye 


A. & B. 分 秒 C. 毫秒 D. 微 秒 
能 在 浏览 器 的 地 址 栏 中 看 到 提交 数据 的 表单 提交 方式 是 ( i" 

A. submit B. get C. post D. out 

可 以 利用 request 对 象 的 ( ) 方 法 获取 客户 端的 表单 信息 。 

A. request. getParameter() B. request. outParameter() 

C. request. writeParameter() D. request. handlerParameter() 


JSP 页 面 程序 片 中 可 以 使 用 下 列 ( ) 方 法 将 strNumx= request. getParamter 


("ix") 得 到 的 数据 类 型 转换 为 Double 类 型 。 


A. Double. parseString(strNumx) B. Double. parseDouble(strNumx) 
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C. Double. parseInteger(strNumx) D. Double. parseFloat(strNumx) 
24. 下 列 不 是 JSP 内 置 对 象 的 是 (。”)。 
A. request B. applicate C. out D. page 
25. 不 能 在 不 同 用 户 之 间 共 享 数据 的 方法 是 ( de 
A. 通过 session 对 象 B. 利用 文件 系统 
C. 利用 数据 库 D. 通过 application 对 象 
二 、 填 空 题 
1. JSP 有 3 种 指令 ,分别 是 x 和 è 
2. JSP 有 7 项 标准 的 “动作 元 素 ”, 分 别 是 
š 和 
3. Tomcat 服务 器 的 默认 端口 是 
4. <jsp: param> REMA 和 动作 元 素 一 起 使 用 。 
5. JSP 标记 都 是 以 或 开头 ,以 或 结尾 。 





6. JSP 页 面 的 基本 构成 元 素 , 其 中 变量 和 方法 声明 (Declaration)、 表 达 式 
(Expression) 和 Java 程序 片 (Scriptlet) 统 称 为 














7. response. setHeader ( " Refresh"，"5") 的 含义 是 指 页 面 刷新 时 间 
为 

8. 在 JSP 中 为 内 置 对 象 定 义 了 4 种 作用 范围 , 即 
和 e 

9. 表单 的 提交 方法 包括 和 Wik 

10. 表单 标记 中 的 属性 用 于 指定 处 理 表单 数据 程序 url 的 地 址 。 


11. JSP 主要 内 置 对 象 有 
sout, config 和 page. 
12. 理论 上 ,GET 是 POST 是 
三 、 简 答题 
. 简 述 JSP 的 工作 原理 。 
. 简 述 page 指令 „include 指令 的 作用 。 
. application 对 象 有 什么 特点 ? ED session 对 象 有 什么 联系 和 区 别 ? 
. JSP 常用 基本 动作 有 哪些 ? 简 述 其 作用 。 
. 简 述 include 指令 和 二 jsp: include 二 动作 的 异同 。 
. 有 几 种 方法 实现 页 面 的 跳 转 ? 如 何 实现 ? 
. JSP 内 置 对 象 有 哪些 ? 它们 的 作用 是 什么 ? 
四 、 程序 题 
1. 请 编写 3 个 JSP 页 面 : submit. html, test. jsp.include. jsp. 
BR, 
CD submit. html 文件 的 作用 是 利用 表单 提交 用 户 输 入 的 姓名 和 邮箱 等 数据 ,这 些 数 





中 uv Ne 
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据 提 交 到 test. jsp 文件 。 

(2) test. jsp 文件 中 利用 动态 标记 include 包含 include. jsp 文件 。 

(3) include. jsp 文件 获取 并 显示 用 户 在 submit. html 中 提交 的 数据 。 

2. 应 用 Date 函数 读 取 系 统 当前 时 间 ,根据 不 同 的 时 间 段 ,在 浏览 器 输出 不 同 的 问候 
语 ,例如 0 一 12 点 之 间 输 出 “早上 好 ”, 同 时 把 系统 的 年 月、 日. 小时、 分 . 秒 和 星期 输出 到 
用 户 的 浏览 器 。 

3. 制作 一 个 用 户 登 录 界 面 , 用 户 输入 中 文 用 户 名 后 能 够 在 参数 接收 页 面 读 取 用 户 输 
入 的 中 文 参数 并 进行 显示 。 运 行 结果 如 图 6-57 所 示 。 


























C 获取 客户 提交 信息 案例 - Windows Internet... [c |O 接受 用 户 输入 信息 并 显示 - Windows Intern... | 区 
GO - Ene e] OO- Brenan 











RAG) d) SEO) RERA IAD HHO XPO SEO FEV BRR (p mop 
= =i aw - 











Ak | 国 获取 客户 提交 信息 率 例 av - 









eg. (RU 
sp [eee 














Q Internet 
图 6-57 运行 结果 
A. 设计 表单 ,制作 读者 选 购 图 书 的 界面 , 当 读 者 选中 一 本 图 书后 , 单 击 “ 确 定 ” 按 钮 ,用 
“jsp: forward page 一 语句 将 页 面 跳 转 到 介绍 该 图 书信 息 页 面 。 文 件 运行 结果 如 图 6-58 
所 示 。 












选择 图 书 - Windows Internet Expl... [o BR) 


Go ~ (Beatty: /ocahesttv 


XD MO SEW 4x 


























《WEB 技 术 应 用 基础 》| 《信号 与 系统 》 




















GO - Amoo] [nx] [oa 
; 文件 四 编辑 四 ”查看 BARW TAD Hh > 
we xmas REW + 
你 选择 的 是 ， 《WEB 技 术 应 用 基础 》 你 选择 的 是 ， 《信号 与 系统 》 
作者 是 : Jerry 作者 是 : Joy 


















































@ Internet E Q internet Rios - Jj 





图 6-58 图 书 选择 结果 
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5. 制作 一 个 购书 页 面 ,要 求 用 户 输入 用 户 名 和 密码 ,并 通过 下 拉 菜 单 选择 需要 购买 
的 图 书 , 单 击 “ 确 定 ” 按 钮 ,将 信息 发 往 服 务 器 端 ,服务 器 端 文件 接收 用 户 输入 并 输出 用 户 
名 和 所 购 图 书 。 文 件 运行 结果 如 图 6-59 所 示 。 


个 选 购 图 书 - Vindows Internet ... [2 BR) C ERMEK - Windows Internet Explorer — [- fi][X] 

OO- Br /ne [a OO- Bssnsaeco x) 

xo REO ZEV BERW TAD ” xig) c FEV BARW IAD Hoo 
Pi xm we Maren 


















































请 输入 个 人 信息 并 选择 要 购买 的 图 书 


用 户 名 (Wary —— 

g TG eee i 

书 | Web 技 术 应 用 基础 圈 
e5 


Nary 你 好 
你 要 购买 的 图 书 为 ， <Web 技 术 应 用 基础 》 
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6. 设计 表单 ,制作 读者 选 购 图 书 的 界面 , 当 读 者 选中 一 本 图 书后 , 单 击 “确定 ”按钮 ， 
页 面 跳 转 到 介绍 该 图 书信 息 页 面 ,要 求 使 用 response 对 象 sendRedirect 方法 。 文 件 运 行 
结果 如 图 6-60 所 示 。 


[二 ER lie 
RE) REO FEV EZAU IAD 帮助 0 
EE 一 | 从 ER - Gan feo ~ 





请 选择 需要 的 图 书 : 

人 eb 技术 应 用 基础 》 GI 
《< 型 计算 机 厌 三 及 应 用 技术 》 [CO 
LE 





(C Yeb 技 术 应 用 基础 - Windows Internet Explorer 


QO- [eene [ee GO - Biene p fon 


XD GAO SEO PRW IRD RO RHO GHD SEY KAW IAV WHY 



































《Web 技 术 应 用 基础 》 《微型 计算 机 原理 及 
RE 


应 用 技术 》 











图 6-60 选择 和 跳 转 页 面 


7. 设计 网 上 考试 界面 如 图 6-61 所 示 ,应 用 session 对 象 存储 测试 数据 , 当 考 生 完成 
试题 , 单 击 * 确 定 ? 按 钮 ,将 答案 与 正确 答案 比较 ,给 出 结果 和 答题 所 用 的 时 间 。 
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[^E 考试 页 面 Windows Internet Explorer 
oo ~ [Eion] [55] | x [S08 
[RAO REO SE) BERW TAD BHO — 

Xo aol] | ERO - MBC 



































考试 系统 


请 输入 姓名 : 
请 输入 考 号 : 





考试 时 间 ，591 秒 
i Medie iani" 
2HE O RRE O 数据 铺路 层 O mam 
2. PIER RAMEE TEX A SEWER DIRE: 
© VCH O Java O Qbasic O JavaScript 
(He) RE 




















Q Internet 
6-61 网 上 考试 界面 


提交 题目 后 页 面 及 查看 考试 结果 页 面 如 图 6-62 所 示 。 


(C http://localhost:8080/exercise/WebRoot/exam. j.-- E CARER 


Windows Internet Explorer 





XED MD SEO (vex) IAV MMW 
ae [Ee | | arw - Mes 


查看 考试 结果 及 答案 


SHO WAD Ew kee IAD whoo 
aa (aver 








第 一 题 正 确 
acy 网 络 居 。 
ERBRA: Java 








图 6-62 查看 考试 结果 页 面 
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应 用 程序 常常 需要 和 数据 库 交互 ,需要 经 常 操作 数据 ,应 用 程序 对 数据 库 的 操作 主要 
是 4 种 : 插入 记录 、 删 除 记录 、 更 新 记录 、 Il sg 这 4 种 操作 常 称 为 
CRUD, 现在 的 数据 库 主 要 是 关系 数据 库 , 常 见 的 关系 数据 库 有 Oracle, DB2 , Microsoft 
SQL Server,MySQL 等 


7.1 MySQL 的 安装 与 配置 





MySQL 是 一 种 开放 源 代 码 的 关系 型 数据 库 管理 系统 ,MySQL 数据 库 系 统 使 用 最 常 
用 的 数据 库 管理 语言 一 一 结构 化 查询 语言 (SQL) 进 行 数据 库 的 管理 。 由 于 其 体积 小 、 速 
度 快 ,总 体 拥有 成 本 低 , 尤 其 是 开放 源码 这 一 特点 ,使 MySQL 被 广泛 地 应 用 在 Internet 
上 的 中 小 型 网 站 中 。 

双击 安装 包 中 的 图 标 就 可 以 进行 MySQL 的 安装 。 安 装 完成 后 ,需要 配置 MySQL 
服务 器 。 具 体 步 骤 如 下 。 

步骤 1: 选择 服务 器 类 型 

可 选择 的 服务 器 类 型 有 3 种 ,根据 占用 内 存 . 磁 盘 和 CPU 等 资源 的 多 少 ,分 为 
Developer Machine( 开 发 测试 类 , MySQL 占用 很 少 资源 )、Server Machine( 服 务 器 类 型 ， 
MySQL 占用 较 多 资源 ) Dedicated MySQL Server Machine( 专 门 的 数据 库 服 务 器 ,MySQL Hi 
用 所 有 可 用 资源 ) ,根据 自己 需要 的 类 型 选择 。 此 处 选择 “开发 测试 类 ”, 如 图 7-1 所 示 。 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.0 server instarce. 


3E 
Hease select a server type, This memory, dick end CPU usage. 


O Developer Machine 
This is a development machine, and many other applications will be 
runont. MySQL Server shoudl ony usa a mhial amour o° 
memory, 





Database Server 
other servers, Pee inia vite ru MySQL wd 
utlize up to all available memcry. 








7-1 服务 器 类 型 选择 
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步骤 2: 选择 服务 器 用 途 

MySQL 数据 库 的 大 致 用 途 , Multifunctional Database (通用 多 功能 型 ,好 )、 
Transactional Database Only( 服 务 器 类 型 ,专注 于 事务 处 理 , 一 般 )、.Non-Transactional 
Database Only( 非 事务 处 理 型 , 较 简单 )。 默 认 选 择 Multifunctional Database, 如 图 7-2 
所 示 。 


se databases. This will optimize the server for the 
use of the fast transactional InnoDB storage engine and the 
high speed MyISAM storage engine. 


C Transactional Database Only 


Optimized for application servers and transactional web. 
applications. This will make InnoDB the main storage engine. 
Note that the MyISAM engine can still be used. 


Suited for simple web applications, monitoring or logging 
applications as well as analysis programs. Only the 
non-transactional MyISAM storage engine will be activated. 


m cma | 
图 7-2 安装 类 型 选择 


步骤 3: 选择 最 大 允许 并 发 连接 数 

并 发 连接 数 , 即 可 以 同时 访问 MySQL 的 数目 ,Decision Support(DSS)/OLAP( 约 20 
个 ) Online Transaction Processing(OLTP)( 约 500 个 )\ManualSetting( 手 动 设 置 .输入 
一 个 数值 ) ,这 里 选 ManualSetting ,输入 100, 单 击 Next 按钮 继续 ;如 图 7-3 所 示 。 


sa) 








Configure the MySQL Server 5.1 server instance. 





Please set the approximate number of concurrent connections to the server. 


© Decision Support (DSS)/OLAP 


Select this option for database applications that will not require 
总 a high number of concurrent connections. A number of 20 
connections will be assumed. 


C Online Transaction Processing (OLTP) 


Choose this option for highly concurrent applications that may 
have at any one time up to 500 active connections such as 
heavily loaded web servers. 


Please enter the approximate number of concurrent 


M.— concurrent connections: | [100 - 








FEIE-XEES 


图 7-3 并 发 访问 数 选 择 
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步骤 4: 选择 访问 端口 

启用 TCP/IP Networking. Bl Internet 网 络 连 接 , 不 选 此 项 其 他 计算 机 将 无 法 访问 ， 
端口 号 默认 的 是 3306。 这 里 将 图 7-4 中 框 出 的 Add firewall exception for this port 复 选 
框 勾 选 上 ,以 免 被 防火 墙 阻拦 。 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.1 server instance. 





Please set the networking options. 


[V Enable TCP/IP Networking 
Enable this to allow TCP/IP connections. When disabled, only 
local connections through named pipes are allowed. 


Port Number: [3306 x] | Iv [Add firewall exception for this port 


Please set the server SQL mode. 


Enable Strict Mode 


This option forces the server to behave more like a traditional 
database server. It is recommended to enable this option. 





ima [CR]. eme 








图 7-4 访问 端口 选择 


步骤 5: 选择 字符 集 标准 

MySQL 对 于 字符 集 的 指定 可 以 细 化 到 一 个 数据 库 .一 张 表 .一列 。 安 装 MySQL 时 ， 
可 以 在 配置 文件 (my. ini) 中 指定 一 个 默认 的 字符 集 , 如 果 没 指定 ,这 个 值 继承 自 编译 时 指 
定 ; 如 果 字 符 集 的 设置 选择 默认 值 ,那么 所 有 数据 库 的 所 有 表 的 所 有 栏 位 都 用 latinl 存 
储 。 然 而 客户 一 般 都 会 考虑 多 语言 支持 ,所 以 需要 将 默认 值 设置 UTF8。 这 里 选择 第 二 
项 Best Support For Multilingualism, 此 项 采用 的 是 UTES 编码 标准 ,如 图 7-5 所 示 。 


QL Server Instance Configuration 
Configure the MySQL Server 5.1 server instance, 





Please select the default character set. 


C Standard Character Set 


Makes Latint the default charset. This character set is suited for 
English and other West European languages. 


racter set. This is the recommended 
aS ring text in many different languages. 


C Manual Selected Default Character Set / Collation 
Please specify the character set to use. 


Character Set: jutte | 
ima [Dim] cn 











图 7-5 字符 集 选 择 


193 


194 Web 项 目 开发 实践 教程 


步骤 6: 注册 环境 变量 

选中 Install As Windows Service 复 选 框 .Service Name 的 值 默 认 即 可 ,同时 选中 
Include Bin Directory in Windows PATH 复 选 框 , 则 系统 变量 中 添加 安装 Bin 目录 ,这 样 
方便 在 命令 行 模式 下 运行 ,如 图 7-6 所 示 。 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.1 server instance. 





Please set the Windows options. 
[V Install As Windows Service 
© This is the recommended way to run the MySQL 
server on Windows. 


SeviceName: [OE] 


[V Launch the MySQL Server automatically 


{heck this option to include the directory containing 
the server / client executables in the Win 
variable so they can be called from the em ine. 





< Back Cancel 


图 7-6 注册 环境 变量 





步骤 7: 权限 设置 
该 页 面 为 超级 管理 员 Root 用 户 设 置 访问 密码 .此 处 设置 为 123456 ,如 图 7-7 所 示 。 


MySQL Server Instance Configuration 
Configure the MySQL Server 5.1 server instance. 





Please set the security options, 


Enter the root password. 
Retype the password. 


ible root access from remote machine: 


This option will create an anonymous account on this server. 
Please note that this can lead to an insecure system. 








7-7 Root 用 户 密码 设置 


步骤 8: 执行 配置 
单 击 Execute 按钮 ,如 果 出 现 图 7-8 所 示 的 界面 , 则 单 击 Finish 按钮 即 配置 成 功 。 
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Configure the MySQL Server 5.1 server instance. 
Processing configuration ... 
Ø Prepare configuration 


Ø Write configuration file. (D'LLDUN Program Fies\MySQUMySQL Server tmyni 
回 Start service. 


回 Apply security settings 
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7.2 SQLyog 安装 与 配置 





SQLyog 是 业界 著名 的 Webyog 公司 出 品 的 一 款 简洁 高 效 、 功 能 强大 的 图 形 化 
MySQL 数据 库 管理 工具 。 使 用 SQLyog 可 以 快速 直观 的 通过 网 络 维护 远 端 的 MySQL 
数据 库 。 需 要 说 明 的 是 ,MySQL 的 管理 维护 工具 非常 多 ,常用 的 MySQL 图 形 化 管理 工 
具 列 举 如 下 , 供 大 家 参考 。 

(D phpMyAdmin(http: //www. phpmyadmin, net/): 开发 基于 Web 方式 架构 在 
网 站 主机 上 的 MySQL 管理 工具 ,支持 中 文 , 管 理 数 据 库 非常 方便 。 不 足 之 处 在 于 对 大 数 
据 库 的 备份 和 恢复 不 方便 。 

(2) MySQLDumper(http; //www. mysqldumper. de/en/); MySQL 数据 库 备 份 恢 
复 程 序 , 解 决 了 数据 库 备 份 和 恢复 的 问题 ,目前 没有 中 文 语 言 包 。 

(3) MySQL GUI Tools (http: //dev. mysql. com/downloads/gui-tools/) . MySQL 
官方 提供 的 图 形 化 管理 工具 ,功能 很 强大 ,值得 推荐 ,可 惜 的 是 没有 中 文 界面 。 

(4) Navicat(http: //www. navicat. com/) ,桌面 版 MySQL 数据 库 管 理 和 开发 工具 。 
与 Microsoft SQLServer 的 管理 器 很 像 ,易学 易 用 。Navicat 使 用 图 形 化 的 用 户 界面 ,可 
以 让 用 户 更 轻松 的 使 用 和 管理 数据 库 。 支 持 中 文 ,有 免费 版 本 提供 。 

SQLyog 的 安装 和 启动 都 比较 简单 .简要 操作 步骤 说 明 如 下 : 

步骤 1: 安装 SQLyog 

双击 下 载 的 SQLyog 的 exe 文件 .按照 相应 的 提示 ,step-by-step 进行 安装 即 可 。 

步骤 2: 设置 MySQL AR 

数据 库 在 创建 之 时 ,权限 为 root. 然而 每 个 普通 用 户 并 不 需要 这 人 么 高 的 权限 , 基 
于 安全 考虑 也 并 不 能 分 配 这 样 的 权限 给 使 用 者 .所 以 在 此 为 MySQL 增加 一 个 新 的 
HP. 
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添加 新 用 户 的 命令 格式 为 : 
grant select on 数据 库 .* to 用 户 名 @ 登录 主机 identified by "密码 " 


步骤 3: 连接 MySQL 
CD 创建 一 个 新 的 连接 ,并 在 MySQL 的 设置 窗 体 输入 相关 的 数据 。 注 意 Port 是 安 
装 MySQL 时 默认 的 访问 端口 ,如 果 安 装 时 未 修改 , 则 默认 值 为 3306 ,如 图 7-9 所 示 。 

















MySQL [HTTP | SSH 








MySQL host address localhost 


d = 
s Database(s) 
WORKS WITH [Separate multiple databases with a semicolon "^ 
MySQL Leaving Databases) blank will display all databases ] 


[e] conca) Test Connection... 

















7-9 连接 MySQL 


(2) 单 击 Test Connection 按钮 时 ,将 弹出 Connection Info 对 话 框 。 如 果 提 示 连 接 失 
败 , 请 确定 输入 的 用 户 名 、 密 码 或 端口 号 是 否 正确 。 

(3) 单 击 Connect 按钮 完成 SQLyog 与 MySQL 的 连接 。 接 下 来 就 可 以 通过 
SQLyog 来 进行 MySQL 的 相关 操作 了 。SQLyog 的 操作 界面 如 图 7-10 所 示 。 


ro 





一 一 一 一 一 一 一 一 一 一 

UU TT TE 
[Savery Cory esr [EH Son eezner 

he Pte epoca ot a S as or SATs 




















图 7-10 SQLyog 的 操作 界面 
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左边 的 框 里 显示 了 数据 库 的 根 目录 ,包括 了 数据 库 的 各 个 架构 ;右上 边 的 框 里 可 以 输 
人 我们 要 操作 的 SQL 语句 ; 右 下 边 的 框 里 显示 结果 。 
这 样 ,读者 就 可 以 方便 地 使 用 菜单 和 工具 栏 对 数据 库 进行 可 视 化 的 操作 了 。 


7.3 JDBC fi 介 





7.3.1 JDBC 的 概念 


JDBC 是 Java DataBase Connectivity(Java 数据 连接 ) 技 术 的 简称 ,是 一 种 可 用 于 执 
行 SQL 语句 的 Java API。 它 由 一 些 Java 语言 编写 的 类 和 接口 组 成 ;程序 员 通过 使 用 
JDBC 可 以 方便 地 将 SQL 语句 传送 给 几乎 任何 一 种 数据 库 , 如 图 7-11 所 示 。 


r FS 
一 d 


7-11 JDBC 作用 














JDBC 规范 定义 了 如 何 操作 数据 库 的 一 组 标准 ,数据 库 厂 商 要 实现 这 些 标准 来 完成 
真正 的 数据 库 连接 和 操作 。 这 就 像 Java 语言 中 的 接口 和 实现 类 ,JDBC 的 标准 提供 接口 ， 
数据 库 厂商 提供 实现 类 。 接 口 只 是 定义 如 何 做 某 件 事 ,但 是 不 能 真正 做 ;实现 类 能 真正 完 
成 接口 中 定义 的 操作 。 这 就 是 JDBC 的 体系 结构 ,如 图 7-12 所 示 。 


JDBC API 








| 
! -— m 
| JDBC 驱 动 程序 for Oracle 
| 

| 

i DBC 驱 动 程序 for DB 


JDBC-ODBCHEIK A EJT 





"n a 其 他 数据 库 


图 7-12 JDBC 体系 结构 


TDBC- d? 81 ITF 


TE Java 应 用 程序 中 ,使 用 JDBC 的 API 来 访问 数据 库 时 要 在 classpath 中 加 载 某 个 
具体 的 数据 库 的 JDBC 驱动 ,这 样 不 管 是 什么 数据 库 , 只 要 有 驱动 ,在 Java 程序 中 使 用 统 
一 的 类 和 接口 就 能 完成 对 数据 库 的 操作 了 。 


197 


198 


Web 项 目 开发 实践 教程 


7.3.2 JDBC 驱动 类 型 


JDBC 数据 库 驱 动 程序 的 4 种 类 型 .分 别 是 JDBC-ODBC 桥 、 本 地 APIJDBC 网 络 纯 
Java 驱动 程序 和 本 地 协议 纯 Java 驱动 程序 。 

1. JDBC-ODBC 桥 驱 动 程序 Tava 

该 种 驱动 程序 的 类 型 是 将 JDBC 操作 转换 为 ex 
ODBC 操作 ,因此 在 访问 数据 库 的 每 个 客户 端 都 必 




















须 安 装 ODBC 驱动 程序 ,这 种 方式 不 适合 远程 访问 eres 

数据 库 。 如 图 7-13 所 示 。 is add 
其 最 大 的 缺点 是 增加 了 ODBC 层 后 导致 效率 ODBC Driver 

低 。 其 次 是 一 般 情 况 下 JDBC-ODBC 桥 不 支持 分 

布 式 ,使 其 应 用 受 限 。 CAS 
2. 本 地 API 


这 种 类 型 的 驱动 程序 把 客户 机 API 上 的 JDBC 图 713 JDBCODBC Wa Eya 


调用 转换 为 Oracle, Sybase, Informix, DB2 或 其 他 DBMS 的 调用 。 

3. JDBC 网 络 纯 Java 驱动 程序 

这 种 驱动 程序 将 JDBC 转换 为 与 DBMS 无 关 的 网 络 协 议 , 之 后 这 种 协议 又 被 某 个 服 
务 器 转换 为 一 种 DBMS 协议 。 这 种 网 络 服务 器 中 间 件 能 够 将 它 的 纯 Java 客户 机 连接 到 
多 种 不 同 的 数据 库 上 。 

4. 本 地 协议 纯 Java 驱动 程序 

这 种 类 型 的 驱动 程序 将 JDBC 调用 直接 转换 为 DBMS 所 使 用 的 网 络 协议 。 这 将 多 
许 从 客户 机 上 直接 调用 DBMS 服务 器 ,是 Intranet 访问 的 一 个 很 实用 的 解决 方法 。 

第 3 类 和 第 4 类 驱动 程序 将 成 为 JDBC 访问 数据 库 的 首选 方法 。 第 1 类 和 第 2 类 驱 
动 程序 有 时 会 作为 过 渡 方案 来 使 用 。 


7.3.3 JDBC 工作 原理 


JDBC 主要 功能 有 三 个 : 

(1) 与 数据 库 建 立 连 接 。 

(2) 向 数据 库 发 送 SQL 语句 并 执行 这 些 语句 。 

(3) 处 理 数据 返回 的 结果 。 

在 完成 这 些 功能 时 涉及 JDBC 的 两 个 程序 包 : 

(1) java. sql 一 一 核心 包 , 这 个 包 中 的 类 主要 完成 数据 库 的 基本 操作 ,如 生成 连接 、 执 
行 SQL 语句 、 预 处 理 SQL 语句 等 。 

(2) javax. sql 扩展 包 ,主要 为 数据 库 的 高 级 操作 提供 接口 和 类 。 

JDBC 通过 提供 一 个 抽象 的 数据 库 接口 ,使 得 程序 开发 人 员 在 编程 时 可 以 不 用 绑 定 
在 特定 数据 库 厂商 的 API 上 ,大 大 增加 了 应 用 程序 的 可 移植 性 。JDBC 常用 类 和 接口 
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如 下 : 

(1) Driver 接口 一 一 加 载 驱 动 程序 。 

(2) DriverManager 类 一 一 装 入 所 需 的 JDBC 驱动 程序 ,编程 时 调用 它 的 方法 来 创建 
连接 。 

(3) Connection 接口 一 一 编程 时 使 用 该 类 对 象 创建 Statement 对 象 。 

(4) Statement 接口 一 一 编程 时 使 用 该 类 对 象 得 到 ResultSet WA. 

(5) ResultSet 类 一 一 负责 保存 Statement 执行 后 所 产生 的 查询 结果 。 

JDBC 的 基本 工作 原理 就 是 通过 这 些 API 来 实现 与 数据 库 建 立 连 接 、 执 行 SQL 语 
句 、 处 理 结果 等 操作 ,如 图 7-14 所 示 。 










Connection (2) 


d Pt e 


数据 库 服务 器 


DriverManager (1) 





图 7-14 JDBC 工作 原理 示意 图 


7.4 JDBC 访问 数据 库 步 又 





7.4.1 创建 与 数据 库 连 接 


从 编程 角度 出 发 ,有 两 个 类 负责 与 数据 库 建立 连接 : 第 一 个 是 DriverManager, 它 是 
JDBC API 提供 的 为 数 不 多 的 实际 类 之 一 ,DriverManager 负责 管理 已 注册 驱动 程序 的 集 
合 , 实 质 上 就 是 提取 使 用 驱动 程序 的 细节 ,这 样 程序 员 就 不 必 直 接 处 理 它们 ;第 二 个 类 是 
实际 处 理 的 JDBC Driver 类 , 它 是 由 独立 厂商 提供 的 ,负责 建立 数据 库 连 接 和 处 理 所 有 与 
数据 库 的 通信 。 创 建 数据 库 连 接 , 分 为 以 下 步骤 。 

1. 加 载 驱动 程序 

进行 数据 库 的 连接 与 操作 首先 要 加 载 驱 动 程序 .以 下 是 几 种 常用 数据 库 驱 动 程序 的 
加 载 方式 。 

CD 加 载 MySQL 数据 库 驱 动 : 


Class.forName ("com.mysql.jdbc.Driver"); 
(2) 加 载 SQL Server 数据 库 驱 动 程序 : 


Class.forName ("com.microsoft.sqlserver.jdbc.SQLServerDriver"); 


(3) 加 载 Oracle 数据 库 驱 动 程序 : 
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Class.forName ("oracle.jdbc.driver.OracleDriver") 


注意 : 如 果 使 用 Eclipse. $ Æ +, i$ # Project Properties > Java Bulid Path — 
Libraries>Add External JARS 命令 ,选择 驱动 jar 文件 ,导入 后 才能 运行 。 

2. 创建 连接 对 象 

如 果 驱 动 程序 可 以 正常 加 载 , 接 下 来 使 用 DriverManager 类 的 getConnection( String 
url,String user,String password) 方 法 连接 数据 库 。 该 方法 得 到 一 个 数据 库 的 连接 ,返回 
一 个 Connection 对 象 。 该 方法 需要 三 个 参数 : 连接 地 址 ,用户 名 、 密 码 。 


Connection con= DriverManger.getConnection (url, user, password) ; 


其 中 url 是 数据 库 的 网 络 位 置 ,JDBC URL 的 格式 是 : jdbc: 子 协 议 : 数据 库 定 位 器 。 
例如 : 
(D MySQL 数据 库 : 


jdbc:mysql:// 机 器 名 /数据 库 名 

(2) SQL Server: 

jdbc:microsoft:sqlserver:// 机 器 名 :端口 号 ;数据 库 名 
(3) Oracle 数据 库 

jdbc:oracle:thine 机 器 名 :端口 号 :数据 库 名 


user 和 password 是 访问 数据 库 的 用 户 名 和 密码 。 如 果 使 用 的 数据 库 是 SQL Server 
且 位 置 在 本 机 上 ,那么 访问 的 数据 库 的 程序 是 : 


String url="jdbc:microsoft:sqlserver: //localhost :1433;DatabaseName= pubs"; 
String user="sa"; 
String password="sa"; 


Connection conn- DriverManager.getConnection (url, user, password) ; 


user 和 password 分 别 是 Sa 和 Sao 

JDBC 连接 由 数据 库 URL 标识 ;协议 是 jdbc, 表 示 我 们 用 Java 程序 连接 数据 库 的 协 
DUE jdbc; A i HAE LE jdbc 协议。 子 协议 主要 用 于 识别 数据 库 驱 动 程序 , 即 不 同 数据 库 
驱动 程序 的 子 协议 不 同 。 

注意 : 数据 库 打 开 后 必须 关闭 ,释放 服务 器 资源 。 

例 7-1 编写 一 个 程序 ,测试 数据 库 连接 。 


test.jsp 

<% @page contentType= "text/html;charset-gb2312" %> 
<%@page import-"java.sql.* "> 

<% 

Connection conn; 

String strConn; 


try{ 
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Class.forName ("org.gjt -mm.mysql .Driver"); 

conn = DriverManager. getConnection ( " jdbc: mysql://localhost/test "," root", 
"123456"); 

s» 

连接 MySQL 数据 库 成 功 ! 

<% 

} catch (java.sql.SQLException e) { 

out.println(e.toString()); 








图 7-15 数据 库 连 接 测试 


7.4.2 通过 JDBC 执行 SQL 语句 


数据 库 成 功 连接 后 ,如 果 进 行 数据 库 操 作 ,需要 使 用 Statement 接口 完成 ,此 接口 可 
以 使 用 Connection 接口 中 提供 的 createStatement() 方 法 进行 实例 化 。 

java. sql. Statement 对 象 代表 一 条 发 送 到 数据 库 执行 的 SQL 语句 。 有 三 种 
Statement 对 象 : Statement 对 象 用 于 执行 不 带 参数 的 简单 SQL 语句 ;PreparedStatement 
对 象 用 于 执行 带 或 不 带 参数 的 预 编译 SQL 语句 ;CallableStatement 对 象 用 于 执行 对 数 
据 库 存储 过 程 的 调用 。 

Statement 对 象 将 SQL 语句 发 送 到 DBMS 由 Connection 对 象 的 createStatement() 
方法 创建 Statement WA: 


Connectioncon- DriverManager.getConnection ("url", "KS", "密码 ") 

Statement stmt=con.createStatement (); 

Statement 接口 提供 的 执行 SQL if A) AY Fe A 77 HE nF. 2 dh SQLException 
异常 。 

(1) executeQuery(): 用 于 SELECT 语句 ,产生 单个 结果 集 的 语句 ,例如 : 


stmt.executeQuery ("SELECT a,b,c FROM Tablel"); 
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(2) executeO : 返回 布尔 值 ,用 于 执行 任何 SQL 语句 ,返回 多 个 结果 集 、 多 个 更 新 计 
数 或 二 者 组 合 的 语句 。 调 用 格式 为 : stmt. execute() 。 

(3) executeUpdate ( ): 用 来 创建 和 更 新 表 , 用 于 执行 INSERT, UPDATE 或 
DELETE 语句 以 及 SQL DDL 语句 ,例如 CREATE TABLE 和 DROP TABLE。 
INSERT, UPDATE 或 DELETE 语句 的 效果 是 修改 表 中 零 行 或 多 行 中 的 一 列 或 多 列 ,该 
方法 返回 一 个 整数 ,指示 受 影响 的 行 数 ( 即 更 新 计数 )。 对 于 CREATE TABLE 和 DROP 
TABLE 等 不 操作 行 的 数据 ,方法 的 返回 值 总 为 零 。 例 如 : 

String sql="UPDATE student SET data="+newdata+" WHERE xm="+"'"+name+"'", 

stmt .executeUpdate (sql) 7 


(4) void addBatch(String sql): 增加 一 个 待 执行 的 SQL 语句 。 
(5) intl] executeBatchO : 批量 执行 SQL 语句 。 
(6) void close); 关闭 Statement, 


7.4.3 ResultSet 对 象 


1. ResultSet 对 象 的 使 用 

ResultSet 对 象 包含 SQL 语句 的 执行 结果 ,是 executeQuery() 方 法 的 返回 值 , 被 称 为 
结果 集 , 它 代表 符合 SQL 语句 条 件 的 所 有 行 。 

它 通过 一 套 get 方法 提供 了 对 这 些 行 中 数据 的 访问 ,即使 用 getXXX 方法 检索 数据 ， 
例如 ,getInt() 用 于 检索 整 型 值 ,getString() 用 于 检索 字符 串 值 等 等 。 

上 述 get 方法 很 多 ,究竟 用 哪 一 个 getXXX() 方 法 ,由 列 的 数据 类 型 来 决定 。 为 了 保 
证 可 移植 性 ,应 该 从 左 至 右 获 取 列 值 . 并 且 从 列 号 1 开始 ,一 次 性 地 读 取 列 值 。 同 一 种 类 
型 的 getXXX() 方 法 是 成 对 出 现 的 ,一 个 是 根据 列 号 得 到 值 . 另 一 个 是 根据 列 名 得 到 值 ， 
getXXX() 方 法 输入 的 列 名 不 区 分 大 小 写 ,假设 ResultSet 对 象 rs 的 第 二 列 名 为 title, 并 
将 值 存储 为 字符 串 ,获取 值 的 代码 如 下 : 

String s-rs.getString("title"); // 根 据 列 名 获得 值 

String s-rs.getString(2); // 根 据 列 号 获得 值 

如 果 多 个 列 具 有 相同 的 名 字 , 则 需要 使 用 列 号 来 索引 以 确保 检索 了 正确 的 列 值 ,如 果 
列 名 已 知 ,但 不 知 其 索引 , 则 可 用 方法 findColumn() 得 到 其 列 号 。 

2. 游标 

ResultSet 对 象 自动 维护 指向 其 当前 数据 行 的 游标 。 结 果 集 游标 可 以 从 第 一 行 移动 到 
最 后 一 行 ,也 可 以 从 最 后 一 行 移 动 到 第 一 行 。 每 调用 一 次 next() 方 法 ,游标 向 下 移动 一 行 。 

游标 的 用 处 是 遍历 结果 集 对 象 , 输 出 记录 ,游标 最 初 位 于 第 一 行 之 前 ,因此 第 一 次 调 
用 nextO ,将 把 游标 置 于 第 一 行 上 ,使 它 成 为 当前 行 。 随 着 每 次 调用 next() ,导致 游标 向 
下 移动 一 行 ,按照 从 上 至 下 的 次 序 获取 ResultSet 行 。 使 用 select 语句 可 以 查找 给 定 条 件 
的 结果 ,数据库 的 查询 记录 使 用 ResultSet 进行 接收 并 将 结果 保存 在 内 存 中 , 需 注 意 , 如 
果 查 询 数据 总 量 过 大 , 则 系统 可 能 会 出 现 问题 。 在 ResultSet 对 象 或 其 对 应 的 Statement 
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对 象 关 闭 之 前 ,游标 一 直 保 持 有 效 。 
ResultSet 的 常用 方法 如 下 : 

* int getInt(int colunmIndex) 一 一 以 整数 形式 按 列 的 编号 获取 指定 列 的 内 容 。 

* int getInt(String colunmName) 以 整数 形式 按 列 名 称 获 取 指 定 列 的 内 容 。 
Float getFloat (int colunmIndex) 一 一 以 浮 点 数 形式 按 列 的 编号 获取 指定 列 的 
内 容 。 

Float getFloat (String colunmName) 
内 容 。 

String getString(int colunmIndex) 一 一 以 字符 串 形式 按 列 的 编号 获取 指定 列 的 
内 容 。 

String getString(String colunmName) 
内 容 。 

Date getDate(int colunmIndex) 





以 浮 点 数 形式 按 列 名 称 获 取 指 定 列 的 





以 字符 串 形式 按 列 名 称 获 取 指定 列 的 








以 Date 形式 按 列 的 编号 获取 指定 列 的 内 容 。 
以 Date 形式 按 列 名 称 获 取 指 定 列 的 





Date getDate (String colunmName) 
内 容 。 

boolean next() 一 一 将 指针 移动 到 下 一 行 。 

public boolean previous() 一 一 将 游标 向 上 移动 ,该 方法 返回 boolean 型 数据 , 当 
移 到 结果 集 第 一 行 之 前 时 ,返回 false。 

public void beforeFirst 一 一 将 游标 移动 到 结果 集 的 初始 位 置 , 即 在 第 一 行 之 前 。 
public void afterLast() 一 一 将 游标 移 到 结果 集 最 后 一 行 之 后 。 

public void first() 一 一 将 游标 移 到 结果 集 的 第 一 行 。 

public void last() 一 一 将 游标 移 到 结果 集 的 最 后 一 行 。 

public boolean isAfterLast() 一 一 判断 游标 是 否 在 最 后 一 行 之 后 。 

public boolean isBeforeFirst() 一 一 判断 游标 是 否 在 第 一 行 之 前 。 

public boolean ifFirst() 一 一 判断 游标 是 否 指向 结果 集 的 第 一 行 。 

public boolean isLast() 一 一 判断 游标 是 否 指向 结果 集 的 最 后 一 行 。 

public int getRow() 一 一 得 到 当前 游标 所 指向 行 的 行 号 , 行 号 从 1 开始 ,如 果 结果 
集 没有 行 , 返 回 0。 

public boolean absolute(int row) 一 一 将 游标 移 到 参数 row 指定 的 行 号 。 如 果 row 取 
负 值 ,就 是 倒数 的 行 数 ,absolute( 一 1) 表 示 移 到 最 后 一 行 ,absolute( 一 2) 表 示 移 到 倒 
数 第 2 行 。 当 移动 到 第 一 行 前 面 或 最 后 一 行 的 后 面 时 ,该 方法 返回 false; 

一 般 来 说 ,JDBC 类 型 和 get 方法 中 的 java 类 型 有 下 面 的 对 应 关系 ,如 表 7-1 所 示 。 


表 7-1 类 型 对 应 关系 








JDBC 类 型 java 类 型 





DATALINK java. net. URL 





DATE java. sql. Date 
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续 表 

JDBC 类 型 java 类 型 
TIME java. sql. Time 
BIGINT long 
SMALLINT short 
CHAR, VARCHAR, LONGVARCHAR String 
JAVA_OBJECT java class 
NUMERIC java, math. BigDecimal 
INTEGER int, Integer 
REAL float, Float 
DOUBLE double, Double 





BIT, BOOLEAN 


boolean, Boolean 











ARRAY Array 
TINYINT byte 
BINARY, VARBINARY, LONGVARBINARY byte[] 


注意 : 查询 所 得 到 的 ResultSet 所 有 的 数据 都 可 以 通过 getString() 方 法 获得 ;查询 
SQL 语句 在 编写 时 尽量 减少 使 用 “select * ”, 最 好 明确 写 出 查询 列 名 ,方便 后 期 代码 


编写 。 


JDBC 操作 最 后 要 依次 关闭 资源 对 象 。 关 闭 ResultSet Statement, Connection 等 资 
源 , 注意 关闭 顺序 与 建立 顺序 相反 。 此 处 也 可 以 只 写 一 次 关闭 连接 的 方法 ,一 般 来 说 连 
接 关闭 ,其 他 的 操作 都 会 关闭 ,但 为 了 养 成 良好 的 编码 习惯 ,最 好 将 所 有 打开 的 对 象 全 部 
依次 关闭 。 


7.5.1 


下 面 是 一 个 使 用 JDBC 技术 操作 数据 库 的 示例 : 


try ( 





7.5 数据 库 编 程 应 用 





JDBC 操作 数据 库 


Class.forName (JDBC 驱动 类 ); 


} catch (ClassNotFoundException e) { 


System.out .print1n ("无 法 找到 驱动 类 "); 





} 


@ 获 得 数据 库 连接 
try { 











//O EE aec 驱动 








SIDBC URL 标 识 要 访问 的 数据 库 





Pd NY 
Connection Con-DriverManager.getConnection (JDBC URL, 数 据 库 用 户 名 ,密码 ); 
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Statement stmt-con.createStatement(); ”//@ 发 送 SQL 操作 命令 
ResultSet rs= stmt .executeQuery ("SELECT a, b, c FROM Tablel"); 
while (rs.next()) { 

int x=rs.getInt ("a"); 

String s=rs.getString("b"); //® SQL 命令 执行 后 得 到 的 结果 
处 理 

float f=rs.getFloat ("c"); 
} 
con.close(); // 回 释放 资源 

} catch (SQLException e) { 

e.printStackTrace () 7 


注意 : 在 Eclipse 中 ,如 classpath 不 能 直接 使 用 ,需要 将 MySQL 的 驱动 . jar 文件 导 
入 或 复制 到 lib 目录 下 。 

例 7-2 编写 一 个 JSP 页 面 ,输出 电 商 平台 的 所 有 客户 列表 。 

customer.jsp: 


«$86 page contentType- "text/html;charset-gb2312" %> 
<%@page import-"java.sql.* "$5 


<$% 

Connection conn; // 连 接 对 象 
String strConn; 

Statement sqlStmt; // 语 句 对 象 
ResultSet sqlRst; // 结 果 集 对 象 
try{ 


Class. forName ("org.gjt.mm.mysql.Driver") 
conn = DriverManager. getConnection ( " jdbc: mysql://localhost: 3306/shop ", 
"root", "123456"); 
sqlStmt= conn. createStatement (java. sql. ResultSet. TYPE SCROLL SENSITIVE, java. sql. 
ResultSet .CONCUR_ UPDATETABLE) ; // 执 行 SQL 语句 
String sqlQuery- "select customerid, address,phone from customer"; 
sqlRst=sqlStmt .executeQuery (sqlQuery); 
和 > 
<center> 顾 客 信息 表 < /center> 
<table border =" 1" width =" 100%" bordercolorlight =" # CC99FF" cellpadding =" 2" 
bordercolordark= "# FFFFFF" cellspacing- "0"> 
«tr» 
<td align="center"> &nbsp; ID« /td> 
<td align- "center"> 地 址 < /td> 
<td align= "center"> 电 话 < /td> 
</tr> 
<swhile (sqlRst-next()) { // 取 得 下 一 条 记录 $> 
<tr><!-- BmIcR--> 
«td»«$-sglRst.getString("customerid")*»« /td> 
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<td><$%=new String (sqlRst.getString ("address") .getBytes ("gb2312") )% >< /td> 
<td><%=sqIRst.getString ("phone") % >< /td» 
</tr> 
«5) $> 
</table> 
<% 
// 关 闭 结果 集 对 象 
sqlRst .close(); 
// 关 闭 语句 对 象 
sqlStmt.close (); 
// 关 闭 数据 库 连 接 
conn.close(); 


) catch (java.sql.SQLException e)( 


out.println(e.toString()); 
) 


























%> 
程序 运行 结果 如 图 7-16 所 示 。 
1D BI P. [http //ocalhost :6080/r2/customer. jsp vie 
顾客 信息 表 
ID 地 址 电话 
1 南京 市 浦口 区 东 大 路 6 号 13712345678 
2 南京 市 江宁 区 将 军 大 道 1301122222 




















7-16 结果 示意 图 


程序 中 Statement 的 原型 是 : 

Statement st=con.createStatement (int type, int concurrency); 
其 中 type 的 取 值 决定 滚动 方式 , 它 可 以 取 : 

(1) ResultSet. TYPE_FORWORD_ONLY 一 一 表示 结果 集 只 能 向 下 滚动 。 

(2) ResultSet. TYPE_SCROLL_INSENSITIVE 一 一 表示 结果 集 可 以 上 下 滚动 , 当 
数据 库 变化 时 ,结果 集 不 变 。 

(3) ResultSet. TYPE_SCROLL_SENSITIVE 一 一 表示 结果 集 可 以 上 下 滚动 , 当 数据 
库 变 化 时 ,结果 集 同步 改变 。 

concurrency 取 值 表示 是 否 可 以 用 结果 集 更 新 数据 库 , 它 的 取 值 是 : 

(1) ResultSet. CONCUR_READ_ONLY 一 一 表示 不 能 用 结果 集 更 新 数据 库 的 表 。 

(2) ResultSet. CONCUR_UPDATETABLE 一 一 表示 能 用 结果 集 更 新 数据 库 的 表 。 


7.5.2. 解决 数据 库 乱 码 问 题 


第 6 章 提 到 有 时 从 数据 库 读 取 的 数据 会 出 现 乱码 ,插入 数据 库 的 中 文 也 可 能 变 成 乱 
码 ,解决 方法 如 下 : 
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首先 在 数据 库 连接 字符 串 中 加 入 编码 字符 集 。 


String Url="jdbc:mysql://localhost/digitgulf? user= root&password- 1234568useUnicode- 
truescharacterEncoding=GB2312"; 


并 在 页 面 中 使 用 如 下 代码 : 


response.setContentType ("text/html ;charset-GB2312") ; 

request.setCharacterEncoding ("GB2312") ; 

实际 上 , MySQL 的 字符 集 支持 (Character Set Support) 有 两 个 方面 : 字符 集 
(Character set) 和 排序 方式 (Collation) 。 对 于 字符 集 的 支持 细 化 到 4 个 层次 : 服务 器 
(server) ,数据库 (database) \ 数 据 表 (table) 和 连接 (connection) 。 可 以 分 两 部 分 分 别 设置 
服务 器 编码 和 数据 库 与 连接 部 分 的 编码 ,从 而 杜绝 中 文 乱码 的 出 现 。 

l. 服务 器 编码 设置 

服务 器 编码 设置 方法 有 两 个 : 

(1) 安装 MySQL 时 ,会 有 一 个 步骤 选择 编码 方式 ,此 时 选择 GBK 或 GB2312 即 可 。 
如 果 不 选 择 , 默 认 的 编码 是 latinl o 

(2) 在 安装 完 MySQL 之 后 ,手动 修改 其 配置 文件 ,如 下 : 

(D 修改 MySQL "E BET ifii) my. ini(MySQL Server Instance Configuration X 
件 )。 设置 default-character-set — GBK CHE . A PA). 

© 修改 data 目录 中 相应 数据 库 目录 下 的 db. opt 配置 文件 : 


default- character- set=GBK 


default- collation-GBK chinese ci 

重启 数据 库 , 关 闭 控 制 台 窗 口 重新 登录 数据 库 即 可 。 

2. RUBE ,数据 表 和 连接 部 分 的 编码 设置 

D 设置 数据 库 和 数据 表 编码 

要 解决 乱码 问题 ,首先 必须 弄 清楚 数据 库 和 数据 表 用 什么 编码 。 如 果 没 有 指明 ,将 是 
默认 的 latin1。 目 前 中 文字 符 用 得 最 多 的 是 GB2312, GBK ,UTF83 等 字符 集 。 下 面 以 
GBK 为 例 说 明 如 何 去 指 定数 据 库 和 数据 表 的 字符 集 。 

创建 数据 库 代 码 

mysql> CREATE TABLE 'mysqlcode' ( 

-> "id' TINYINT( 255 ) UNSIGNED NOT NULL AUTO INCREMENT PRIMARY KEY, 

—»'content' VARCHAR( 255 ) NOT NULL 

->) TYPE-MYISAM CHARACTER SET GBK COLLATE GBK chinese ci; 

Query OK, 0 rows affected, 1 warning (0.03 sec) 
其 中 后 面 的 

TYPE-MYISAM CHARACTER SET GBK COLLATE GBK chinese ci; 


就 是 指定 数据 库 的 字符 集 。 
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当然 也 可 以 通过 如 下 指令 修改 数据 库 数 据 表 的 字符 集 : 
alter database mysqlcode default character set 'GBK'. 


前 面 已 经 设置 了 服务 器 .数据库 和 数据 表 的 编码 ,那么 数据 库 中 的 编码 便 都 是 GBK 
中 文 可 以 存储 进去 。 但 是 如 果 要 通过 执行 insert 或 select 等 操作 时 ,仍然 会 出 现 中 文 乱 
码 问题 ,这 是 因为 还 没 设置 连接 (connection) 部 分 的 编码 ,而 insert, select 等 数据 库 操作 
都 包含 与 数据 库 的 连接 动作 。 

2) 设置 连接 编码 

连接 编码 设置 如 下 : 


mysql> SET character set client- 'GBK'7 
mysql> SET character set connection- 'GBK' 
mysql» SET character set results- 'GBK' 


设置 好 连接 编码 ,下 面 便 可 以 成 功 插入 中 文 了 ,例如 ， 


mysql> insert into mysqlcode values (null, ' 喜 欢 Java Web'); 
Query OK, 0 rows affected (0.02 sec) 


其 实 , 上 面 设 置 连接 编码 的 三 条 命令 可 以 简化 为 一 条 : 
mysql» set names 'GBK'; 
设置 好 了 连接 编码 后 ,在 select 查询 时 ,也 能 正确 显示 中 文 : 


mysql> select * from mysqlcode; 
E + 


1 id | content | 


+----+----------- + 
11 | 喜欢 Web | 
+----+----------- + 


1 row in set (0.00 sec) 


7.5.3 PreparedStatement 的 应 用 


PreparedStatement 接口 是 Statement 接口 的 子 接口 . 它 直 接 继承 并 重 载 了 
Statement 的 方法 。PreparedStatement 对 象 并 不 将 SQL 语句 作为 参数 提供 给 这 些 方法 ， 
因为 它们 已 经 包含 了 预 编 译 SQL 语句 ,这 也 是 将 其 命名 冠 以 Prepared 的 原因 。 包 含 于 
PreparedStatement 对 象 中 的 SQL 语句 可 具有 一 个 或 多 个 IN 参数 。IN 参数 的 值 在 
SQL 语句 创建 时 未 被 指定 。 相 反 , 该 语句 为 每 个 IN 参数 保留 一 个 问号 ("?") 作 为 占 位 
符 。 每 个 问号 的 值 必须 在 该 语句 执行 之 前 通过 适当 的 setXXX() 方 法 来 提供 。 

由 于 PreparedStatement 对 象 已 预 编译 过 ,所 以 其 执行 速度 要 快 于 Statement 对 象 。 
因此 多 次 执行 的 SQL 语句 经 常 创建 为 PreparedStatement 对 象 ,以 提高 效率 。 

例 7-3 设计 注册 表单 ,接受 用 户 输入 信息 ,将 信息 插入 到 数据 库 中 (网 站 用 户 注册 
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部 分 功能 ) 。 
分 析 : 该 例子 中 需要 准备 两 个 页 面 : 一 个 是 提交 数据 页 面 reg. html; 另 一 个 是 数据 
库 处 理 页 面 reg. jsp. 


reg.html: 
«body» 
< form action- "reg.jsp" method= "post"> 
姓名 :< input type="text” name- "uname"» <br><br> 
密码 :< input type="password" name= "upass"» «br» «br» 
«input type- "submit" value- "注册 "> 
«input type- "reset" value- "取消 "> 
</form> 
< /body> 
reg.jsp: 
<body> 
<% 
request .setCharacterEncoding ("GBK") ; 
String name= request .getParameter ("uname") ; 
String pass= request .getParameter ("upass"); 
try{ 
Class.forName ("org.gjt.mm.mysql.Driver"); 
Connection con= DriverManager.getConnection ("jdbc:mysql://localhost: 3306/test","root"," 
123456"); 
Statement sta- con.createStatement () ; 
Sta.executeUpdate ("insert into user_table(name, pass) values (' "+ name+ "', '"4 pass 
td en 
sta.close(); 
con.close(); 
}catch (Exception e) 
{ 
e.printStackTrace () ; 


$> 
< /body> 
在 上 面 例子 中 ,如 果 在 姓名 的 text 框 中 输入 了 带 单 引号 的 内 容 , 如 : 
姓名 : [isl 
就 会 发 现 执 行 出 现 了 操作 数据 库 失败 。 原 因 是 使 用 statement 语句 对 象 ,需要 一 个 完整 的 
SQL 语句 ,但 如 果 输 入 的 内 容 中 包含 单 引 号 ,就 会 造成 数据 输入 的 不 正确 。 这 种 情况 的 解 
决 办 法 是 可 以 使 用 Statement 的 子 接口 完成 语句 对 象 的 创建 PreparedStatement。 


Æ JDBC 应 用 中 ,通常 会 以 PreparedStatement 代替 Statement。 也 就 是 说 ,在 熟练 掌 
48 JDBC 编程 后 ,一 般 情况 下 不 要 使 用 Statement. KAW: 
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(1) 用 PreparedStatement 来 代替 Statement 会 使 代码 多 出 几 行 ,考虑 问题 更 加 全 
面 ,这 样 的 代码 无 论 从 可 读 性 还 是 可 维护 性 上 来 说 ,都 比 直接 用 Statement 的 代码 高 很 多 
Bux. 

(2) PreparedStatement 是 预 编 译 过 的 ,会 提高 性 能 。 每 种 数据 库 都 会 尽 最 大 努力 对 
预 编译 语句 提供 最 大 的 性 能 优化 。 因 为 预 编译 语句 有 可 能 被 重复 调用 ,所 以 语句 在 被 数 
据 库 的 编译 器 编译 后 的 执行 代码 被 缓存 下 来 ,那么 下 次 调用 时 只 要 是 相同 的 预 编译 语句 
就 不 需要 编译 ,只 需 将 参数 直接 传人 编译 过 的 语句 执行 代码 中 。 

(3) 极 大 地 提高 了 安全 性 。 使 用 预 编译 语句 ,传人 的 内 容 不 会 和 原来 的 语句 发 生 任 
何 匹配 关系 ,如 果 全 使 用 预 编译 语句 ,就 不 用 对 传人 的 数据 做 任何 过 滤 。 

PreparedStatment 常用 方法 如 下 : 
int executeUpdate() 一 一 执行 设置 的 预 处 理 SQL 语句 。 
ResultSet executeQuery() 一 一 执行 数据 库 查询 操作 ,返回 ResultSet, 
指定 要 设置 的 索引 编号 ,设置 整数 





void setInt (int parameterIndex, int x) 








* void setFloat(int parameterIndex, Float x) 指定 要 设置 的 索引 编号 ,设置 浮 点 
数 内 容 。 

* void setString(int parameterIndex.String x) 指定 要 设置 的 索引 编号 ,设置 字 
符 串 内 容 。 


void setDate(int parameterIndex.Date x) 一 一 指定 要 设置 的 索引 编号 ,设置 java. 
sql. Date 型 内 容 。 

注意 : setDate() 方 法 中 是 java. sql. Date, 而 不 是 .java. util. Date 类 型 

在 使 用 PreparedStatement 时 ,SQL 语句 与 Statement 完全 相同 ,但 是 具体 内 容 采 用 
“?” 作 为 占 位 符 形式 出 现 , 后 面 设置 时 按照 *?” 占 位 符 的 顺序 设置 具体 的 内 容 。*?” 按 照 从 
左 到 右 出 现 的 位 置 其 值 从 1 开始 ,以 后 依次 加 1, 究竟 用 哪 一 个 setXXXO 〇 方法 ,由 “?” 所 
表示 的 参数 类 型 来 决定 ,因为 X 的 类 型 是 java. sql. Types 中 的 类 型 ,而 参数 的 类 型 是 某 
种 数据 库 中 的 数据 类 型 ,因此 应 该 保证 它们 的 类 型 能 够 相对 应 。 

例 7-4 使 用 PreparedStatement 语句 对 象 执行 SQL 语句 。 


<% 
//request.setCharacterEncoding ("GBK") ; 
//String name= request .getParameter ("uname") ; 
//String pass=request .getParameter ("upass") ; 
try{ 
Class. forName ("org.gjt.mm.mysql .Driver"); 
Connection con- DriverManager .getConnection ("jdbc:mysq] : //1ocalhost: 
3306/test", "root", "123456") ; 
PreparedStatement psta- con.prepareStatement ("insert into user table (name,pass) values 
(2,2)")5 // 插 入 操作 
psta.setString(l, name); 
psta.setString(2, pass); 
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psta.executeUpdate () ; * / 
PreparedStatement psta-con.prepareStatement ("select * fram user table"); 
ResultSet res=psta.executeQuery () ; // 查 询 操作 
while (res.next ()){ 

$> 

«hl» ID: <% = res.getInt (1) %>,name:<%= res.getString (2) % >, pass:<% = res. 
getString(3) >< /hl> 

<% 
} 
psta.close(); 
con.close(); 

}catch (Exception e) 

t 


e.printStackTrace () 7 


&> 


注意 : 在 实际 开发 中 ,尽量 使 用 PreparedStatement 去 操作 数据 库 , 而 不 要 使 用 
Statement, 如 不 确定 查询 内 容 , 可 使 用 模糊 查询 ,例如 查询 所 有 姓 “ 朱 ”的 人 的 信息 ,可 将 
语句 改 为 


st.setString(1, "$ "+" "+ "$") 


在 程序 中 可 以 用 循环 语句 生成 这 一 系列 的 语句 ,从 而 方便 此 类 SQL 语句 的 生成 。 可 
以 用 PreparedStatement 对 象 的 public void addBatch() throws SQLException 方法 将 其 
加 入 到 一 个 批 次 作业 。 最 后 用 PreparedStatement 对 象 的 public int[] executeBatch O 
throws SQLException 方法 一 次 执行 所 有 加 入 的 批 次 作业 。 例 如 : 


PrepareStatement p= con.prepareStatement ("insert into city values(?)"); 
for (int i=0;i<aa.length;i++) 
{ 
p.setString(1,aa[i]);p.addBatch(); 
} 
p.excuetBatch () 7 


该 段 代码 可 以 将 数组 aa 中 的 所 有 城市 名 称 成 批 次 地 加 入 表 city 中 。 
7.5.4 JDBC 的 其 他 应 用 


除了 以 上 应 用 以 外 ,JDBC 还 可 以 应 用 于 例如 投票 等 统计 系统 ,如 下 面 的 例子 所 述 。 

例 7-5 编程 实现 一 个 网 上 投票 系统 。 

分 析 : 创建 一 个 数据 库 vote, 该 库 含 有 两 个 表 goods 和 IP. goods 表 存 放 商 品 的 名 字 
和 得 票数 ,IP 表 存 放 投票 人 的 IP 地 址 。 投 票 之 前 ,要 把 商品 的 名 字 和 初始 得 票数 存 人 表 
中 ,如 图 7-17 所 示 , 表 IP 的 结构 如 图 7-18 所 示 。 
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图 7-17 Goods 表 结 构 及 内 容 图 7-18 IP 表 结构 及 内 容 


投票 系统 由 两 个 页 面 组 成 : vote. jsp 和 startvote. jsp, vote. jsp 按照 goods 表 中 的 候 
选 商品 生成 一 个 投票 的 表单 。 


vote.jsp: 
<% @page contentType= "text/html; charset=GB2312" %> 
<%@page import-"java.sql.* " > 
<HTML> 
<BODY> 
<% StringBuffer nameList=new StringBuffer (); 
Connection con; 
Statement sql; 
ResultSet rs; 
try(Class.forName ("org.gjt.mm.mysql.Driver"); 
} 
catch (ClassNotFoundException e) {} 
try{ 
con= java. sql. DriverManager. getConnection (" jdbc: mysql://localhost: 3306/ 
vote", "root", "123456") 7 
sql=con.createStatement () ; 
rs=sql.executeQuery ("SELECT * FROM goods"); 
nameList.append("« FORM action-startvote.jsp Method=post>"); 
nameList.append("« Table Border» "); 
nameList .append ("< Table Border» "); 
nameList .append ("<TR>"); 
nameList .append ("<TH width= 100» "+ "商品 名 称 "); 
nameList .append ("<TH width= 50> "+ "投票 选择 "); 
nameList .append ("< /TR>"); 
while (rs.next ()) 
{ nameList .append ("<TR>") ; 
String name- rs.getString(1); 
nameList .append ("<TD> "+name+ "< /TD» ") ; 
String s="< Input type=radio name- name value- "4 namet ">"; 
nameList.append("« TD» "+s+ "« /TD» ") 7 
nameList.append("« /TR»") ; 
} 
nameList .append ("< /Table> "); 
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nameList.append("« Input Type= submit value= 提 交 >"); 
nameList .append ("< /FORM ") ; 
con.close(); 
out.print (nameList); 
} 
catch (SQLException el) {} 

%> 
</BODY> 
< /HIML» 


startvote. jsp 页 面 获取 vote. jsp 页 面 提交 的 候选 商品 的 名 字 。 该 页 面 在 进行 投票 之 
前 ,首先 查询 IP 表 , 判 断 该 用 户 的 IP 地址 是 否 已 经 投 过 票 ,如 果 该 IP 地 址 没有 投 过 票 ， 
就 可 以 参加 投票 了 ,投票 之 后 ,将 投票 用 户 的 IP 写 入 数据 库 的 IP 表 中 ;如 果 该 IP 地址 已 
经 投 过 票 ,将 不 允许 再 投票 。 我 们 通过 IP 地 址 来 防止 一 台 计 算 机 反复 投票 ,但 不 能 有 效 
地 限制 拨号 上 网 的 用 户 ,因为 拨号 上 网 的 用 户 的 IP. 是 动态 分 配 的 ,用 户 可 以 重新 拨号 上 
网 获得 一 个 新 的 TP 地 址 。 如 果 没 有 投票 直接 访问 startvote. jsp 页 面 , 则 系统 会 给 出 “您 
没有 投票 ,没有 权利 看 投票 结果 ”的 提示 。 


startvote.jsp: 
<%@page contentType- "text/html;charset=GB2312" %> 
<%@page import-"java.sql.* "$5 
<%@page import= "java.io. * "$5 
<html> 
<body> 
<3! // 记 录 总 票数 的 变量 : 

int total=0; 

// 操 作 总 票数 的 同步 方法 : 

synchronized void countTotal () 

{ total++; 
t 

5» 
<%boolean vote=true;// 决 定 用 户 是 否 有 权 投票 的 变量 。 

// 得 到 被 选择 的 候选 商品 名 字 : 

String name=""; 

name= request .getParameter ("name") ; 

if (name--null) 
(name- "2 "7 
H 

byte a[]- name.getBytes ("GB2312") ; 

name-new String (a) ; 

// 得 到 投票 人 的 IP 地 址 : 

String IP= (String) request .getRemoteAddr () ; 


// 加 载 桥接 器 : 
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try{Class.forName ("org.gjt.mm.mysql.Driver"); 
} 
catch (ClassNotFoundException e) {} 
Connection con=null; 
Statement sql-null; 
ResultSet rs=null; 
// 首 先 查询 IP 表 ,判断 该 用 户 的 TP 地 址 是 否 已 经 投 过 票 : 
try { con- DriverManager.getConnection ("jdbc:mysql://localhost:3306/vote", "root"," 
123456"); 
sql=con.createStatement () ; 
rs=sql.executeQuery ("SELECT * FROM IP WHERE IP="+"'"+IP+"'"); 
int row=0; 
while (rs.next ()) 
{ row++7 
) 
if(row»-1) 
( vote- false; // 不 允许 投票 。 
} 
} 
catch (SQLException e) 
1% 
if (name equals ("?")) 
{ out.print ("您 没有 投票 ,没有 权利 看 投票 结果 "); 
} 
else 
t 
if(vote) 
{ out.print ("您 投了 一 票 "); 
// 将 总 票数 加 1: 
countTotal (); 
// 通 过 连接 数据 库 ,给 该 候选 商品 增加 一 票 ， 
// 同 时 将 自己 的 IP 地 址 写 和 数据库 。 
try 
{ rs= sql .executeQuery ("SELECT * FROM goods WHERE name= "+ "'"+name+ "'"); 
rs.next(); 
int count- rs.getInt ("count"); 
count++; 
String condition= "UPDATE goods SET count= "+ count* " WHERE name="+"'"+ name 
gen, 
// 执 行 更 新 操作 (投票 计数 ) : 
sql .executeUpdate (condition) 
// 将 1P Mosk A IP 表 : 
String to="INSERT INTO IP VALUES"+"("+""'"+IPt""+")"; 
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sql .executeUpdate (to) ; 
H 
catch (SQLException e) 
{ out.print (""+e)7 
H 
// 显 示 投 票 后 表 中 的 记录 : 
try{ rs=sql.executeQuery ("SELECT * FROM goods"); 
out.print ("< Table Border>") ; 
out.print ("<TR>"); 
out.print ("<TH width= 100> "+ "商品 名 "); 
out.print ("<TH width=50> "+ "得 票数 "); 
out.print ("<TH width= 50» "+ "总 票数 :"+ total); 
out.print ("</TR>"); 
while (rs.next ()) 
{ out.print ("<TR>"); 
out.print ("« TD» "+ rs.getString(1)* "« /TD» ") 
int count- rs.getInt ("count"); 
out.print ("<TD> "+ count* "< /TD» ") ; 
double b= (count* 100)/total; ”// 得 票 的 百分比 。 
out.print ("<TD> "+b+ "$ "+ "< /TD> ") 
out.print ("</TR>") ; 
} 
out.print ("< /Table>"); 
con.close(); 
} 
catch (SQLException e) 
IB 
) 
else 
{out.print ("您 已 经 投 过 票 了 "); 


</BODY> 
</HTML> 


注意 : 在 某 些 动态 分 配 IP 的 计算 机 上 ,由 于 程序 得 不 到 IP 地 址 , 则 可 能 会 出 现 异 
常 ,读者 可 以 自行 编写 获取 动态 IP 的 程序 。 运 行 结果 如 图 7-19 一 图 7-21 所 示 。 


© W [http:/Mocalhost:6080/r2/startvote. jsp 
您 没有 投票 ,没有 权利 看 投票 结 


图 7-19 投票 判断 页 面 
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图 7-20 ”投票 页 面 图 7-21 投票 成 功 页 面 


7.6 数据 库 连 接 池 





7.6.1 数据 库 连 接 池 概述 


在 基于 数据 库 的 Web 系统 中 ,如 果 在 较 短 的 时 间 内 ,访问 数据 库 的 请 求 量 不 大 ,那么 
在 前 面 例子 中 使 用 的 数据 库 连 接 方法 是 可 以 满足 需求 的 。 但 随 着 请 求 数 不 断 增加 ,系统 
的 开销 越 来 越 大 ,响应 Web 请 求 的 速度 越 来 越 慢 , 甚 至 导致 系统 无 法 响应 Web 请 求 。 造 
成 这 种 结果 的 原因 是 由 于 传统 数据 库 访 问 模式 存在 下 面 的 一 些 缺 陷 : 

(1) 每 次 数据 库 请 求 都 需要 建立 一 次 数据 库 连接 ,而 每 建立 一 次 数据 库 连接 就 需要 
花费 0.05 一 1s 的 时 间 ,这 个 时 间 相 对 于 数据 库 本 身 的 操作 时 间 和 软件 本 身 的 执行 时 间 来 
说 ,是 非常 漫长 的 。 

(2) 由 于 没有 对 连接 数据 库 的 连接 数量 进行 控制 ,因此 可 能 出 现 超出 数据 库 处 理 能 
力 的 连接 数量 和 处 理 请 求 , 导 致 系统 的 崩溃 。 

(3) 单独 管理 每 一 个 连接 ,并 进行 使 用 后 的 资源 回收 。 在 这 种 方式 下 ,如 果 某 些 连接 
出 现 了 异常 ,导致 无 法 正常 关闭 连接 ,那么 将 会 导致 资源 的 严重 浪费 其 至 数据 库 服 务 器 的 
内 存 泄露 。 

由 于 以 上 的 缺点 ,开发 人 员 设 计 出 一 种 叫做 “连接 池 ” 的 技术 ,来 处 理 传 统 连接 方式 带 
来 的 问题 ,数据 库 连 接 池 可 以 控制 连接 数据 库 的 数量 ,避免 因为 连接 过 多 而 使 数据 库 服务 
器 崩溃 ,还 可 以 缩短 连接 时 间 ,提高 系统 访问 速度 。 


7.6.2 数据 库 连 接 池 的 基本 原理 


在 共享 资源 的 开发 中 ,有 一 个 很 著名 的 设计 模式 : 资源 池 (Resource Pool)。 该 模式 
正 是 为 了 解决 资源 的 频繁 分 配 、 释 放 所 造成 的 一 系列 问题 而 设计 的 。 在 数据 库 领 域 ,这 
个 设计 模式 很 重要 的 应 用 就 是 数据 库 连 接 池 。 

数据 库 连接 池 的 基本 思想 就 是 为 数据 库 连 接 建立 一 个 “存储 池 ”。 数 据 库 建 立 初期 ， 
预先 在 缓冲 池 中 放 入 一 定数 量 的 连接 , 当 需 要 建立 数据 库 连 接 时 ,只 需 从 “连接 池 ” 中 申请 
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一 个 ,使 用 完毕 再 将 该 连接 作为 公共 资源 保存 在 “连接 池 ” 中 ,以 供 其 他 连接 申请 使 用 。 在 
这 种 情况 下 , 当 需 要 连接 时 ,就 不 用 再 重新 建立 连接 ,这 样 就 在 很 大 程度 上 提高 了 数据 库 
连接 处 理 的 速度 ;同时 ,还 可 以 通过 设 定 连接 池 最 大 连接 数 来 防止 系统 与 数据 库 的 无 限制 
连接 ;更 为 重要 的 是 ,可 以 通过 连接 池 管 理 机 制 监视 数据 库 的 连接 的 数量 以 及 各 连接 的 使 
用 情况 ,为 系统 开发 、 测 试 及 性 能 调整 提供 依据 。 

连接 池 的 工作 原理 如 图 7-22 所 示 。 










2. 从 连接 池 中 选择 一 ”| 3. 使 用 完毕 的 连接 ， | 1. 申请 


支 连接 ， 进 行 分 配 放 回 到 连接 池 中 








连接 池 






一 定数 量 的 连接 





Y 
DBMS 





图 7-22 连接 池 的 基本 工作 原理 


除了 向 连接 池 请 求 分 配 数据 库 连 接 之 外 ,由 于 使 用 同一 个 连接 的 次 数 不 能 过 多 ,连接 
池 还 负责 按照 一 定 的 规则 释放 使 用 次 数 较 多 的 连接 ,并 重新 生成 新 的 连接 实例 。 保 持 连 
接 池 中 所 有 连接 的 可 用 性 。 


7.6.3 在 服务 器 中 配置 连接 池 


数据 库 连 接 池 配置 时 ,首先 将 驱动 文件 复制 到 服务 器 (例如 tomcat) 安 装 目录 下 的 lib 
里 并 添加 到 Web 应 用 项 目 中 去 。 以 mysql 为 例 ,配置 过 程 和 内 容 如 下 : 

CD. 配置 tomcat 安装 目录 的 conf 文件 夹 下 的 context. xml X ff. E < context > 
去 /context> 之 间 添 加 连接 池 如 下 : 
// 定 义 数 据 库 连接 的 名 称 


< resource name="jdbc/mysql" 
auth- "Container" 
type- "javax.sql.DataSource" 
// 指 定 JDBC 驱动 器 的 类 


driverClassName="com.mysql.jdbc.Driver" 


url- "jdbe:mysql://localhost/test" // 表 示 的 是 需要 连接 的 数据 库 的 地 址 和 
名 称 

username- "root" // 表 示 登 录 数 据 库 时 使 用 的 用 户 名 

password- "123456" // 登 录 数 据 库 的 密码 


// 表 示 连 接 池 的 最 大 数据 库 连 接 数 。 设 为 0 表 


maxActive="5" 
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示 无 限制 

maxIdle="30" // 数 据 库 连接 的 最 大 空闲 时 间 。 超 过 此 空闲 时 
Ta] ,数据库 连接 将 被 标记 为 不 可 用 ,然后 被 释 
放 。 设 为 0 表示 无 限制 

maxWait="10000" /> // 表 示 最 大 建立 连接 等 待 时 间 。 如 果 超 过 此 时 
间 将 接 到 异常 。 设 为 -1 表示 无 限制 


(2) 在 Web 项 目下 的 web. xml 中 的 二 web-app 二 二 /web-app 二 之 间 加 入 xml 代码 : 


< resource- ref» 
«description» DB Connection< /description> 
< res- ref- name> jdbc/mysql< /res- ref- name> 
< res- type> javax.sql.DataSource< /res-type> 
< res- auth» Container« /res- auth» 


< /resource- ref» 


(3) 测试 数据 源 
完成 上 述 配置 以 后 ,可 以 使 用 如 下 的 文件 测试 数据 库 连 接 池 的 配置 是 否 正确 : 在 
Web 项 目下 创建 测试 JSP 页 面 ,代码 如 下 : 


<%@page language- "java" import- "java.util. * " pageEncoding- "GBK"% > 
< !doctype html public "- //w3c//dtd html 4.0 transitional//en" 
"http: //www.w3.org/TR/REC- html 40/strict.dtd"» 
<%@page import-"java.sql.* "$> 
<%@page import="javax.sql.* "%> 
<%@page import-"javax.naming. * "$5 
<%@page session="false" > 
<html> 
<head> 
«meta http- equiv= "Content-Type" content= "text/html; charset=GB2312"> 
<title></title> 
<% 
out.print ("测试 开始 "); 
DataSource ds=null; 
try{ 
InitialContext ctx-new InitialContext (); 
ds= (DataSource) ctx. lookup ("java :comp/env/jdbc/mysql") ; 
Connection conn=ds.getConnection () + 
Statement stmt=conn.createStatement () ; 
/ HIER person 必须 是 数据 库 已 建 好 的 表 
// 这 里 的 数据 库 是 前 文 提 及 的 Data Source URL 配置 里 包含 的 数据 库 。 
String strSql=" select * from person"; 
ResultSet rs=stmt .executeQuery (strSql); 
while (rs.next ()) { 
out.print(rs.getString(1)); 
} 


out.print ("测试 结束 "); 
i 
catch (Exception ex) { 


out.print (" 出 现 例外 ,信息 是 :"+ex.getMessage ())7 


ex.printStackTrace (); 
H 
8» 
</head> 
<body> 
< /body> 
</html> 
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运行 该 页 面 ,如 果 能 看 到 person 中 存储 的 用 户 名 和 密码 , 则 说 明成 功 ; 由 于 我 们 已 经 
将 最 大 数据 库 连接 数 设置 为 5 个, 故 当 连续 刷新 测试 页 面 达 6 次 后 ,将 会 报错 “Cannot 


get a connection, pool exhausted”. 


7.7 案例 实 


7.7.1 案例 需求 说 明 


设计 商品 数据 库 , 具 体 如 图 7-23 所 示 。 

其 中 Id 为 主键 ,自动 增 量 。 其 他 字段 所 对 应 
名 称 分别 为 产品 名 、 类 型 价格、 库存 数量 和 制造 
商 。 主 键 、 产 品名 、 类 型 和 制造 商 不 能 为 空 。 在 商 
品 数据 库 中 添加 具体 数据 ,如 图 7-24 所 示 。 

建立 查询 页 面 index. jsp, 运 行 界面 如 图 7-25 
所 示 。 





Erer] frm 
int m 
varchar(50) n 
 varchar(50) 
float 
int m 
varchar(50) a 





图 7-23 数据库 具体 设计 





= 
& 











name model price number maker 

1 可 口 可 乐 饮料 25 300 可 口 可 乐 公司 
2 Rn wH 25 2m 康师傅 

4 康师傅 绿茶 饮料 25 55 Beine 

s se 碳酸 饮料 3 433 司 口 可 乐 公司 
7 康 师 简 牛肉 面 方便面 2 456 Lr 

s SG CE) 碳酸 饮料 3 700 百事 公司 

9 百事 可 乐 碳酸 议 料 3 450 百事 公司 

10 [d 饮料 15 200 哇 哈 哈 

n 优 乐 美 tke 1 10 优 乐 美 

2 康 师 重 茉莉 青 条 ”饮料 25 55 ine 

13 康师傅 矿泉 水 ”饮用 品 1 1000 Beim 

14 康师傅 琶 梅 汤 。 饮料 3 550 Beim 

16 anes ARH 2 300 ine 

7 王老吉 Rie 3 60 王老吉 公司 
MAL MAL MAL MAL MAL 





图 7-24 数据 库 数据 
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pds/indexjsp -> 


查询 商品 


请 选择 要 查询 的 类 型 | 规格 “| HARSH | E 











7-25 商品 查询 界面 


查询 结果 需要 分 页 显示 ,如 图 7-26 所 示 。 





























httpV/127.0.0.1.8080/SelectGoods/PageShowjsp -Pp OSES 
+ =] 
查询 商品 如 表 

商品 名 称 商品 类 型 商品 价格 
DERES TH 2.5 
康师傅 冰 红 葵 TO 2.5 
| ne TA 2.5 
要 要 WEVH | 3.0 
EFA GO | ” 碳 酮 砍 料 3.0 
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图 7-26 查询 结果 分 页 显示 


7.7.2 技能 训练 要 点 


电子 商务 平台 开发 的 重要 一 步 是 如 何 对 数据 库 进行 增 、 删 改 、 查 的 操作 ,本 案例 的 训 
练 要 点 在 于 : 

(1) 如 何 创建 数据 库 并 输入 相应 的 数据 。 

(2) 如 何 使 用 JSP 连接 数据 库 并 完成 增删. 改 、 查 等 操作 。 

(3) 如 何在 JSP 页 面 中 完成 数据 的 分 页 。 


7.7.3 案例 实现 


案例 的 总 体 流 程 是 进入 查询 页 面 (index. jsp) 后 选择 想 通过 什么 查询 类 型 和 关键 字 
进行 模糊 查询 ,输入 例如 产品 名 、 制 造 商 、 关 键 字 等 ,输入 结束 后 提交 给 Date. jsp 页 面 ,此 
页 面 的 目的 是 实现 对 index. jsp 页 面 表单 的 数据 存储 到 Session 当中 ,页 面 跳 转 到 
PageShow. jsp 页 面 。 在 PageShow. jsp 页 面 中 ,实现 了 对 数据 库 的 模糊 查询 和 分 页 显示 。 

实现 代码 如 下 : 
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1. 查询 页 面 (index. jsp) 


«$6 page language- " 
<body bgcolor= "shite"» 
<center> 
<font size="6" face= " 幼 圆 "><b> 查 询 商 品 < /b>< /font> 
< form action= "Date.jsp" method- "get"> 


java" import= "java.util. * " pageEncoding- "GB2312"$ > 





<br><br><br> 
请 选择 要 查询 的 类 型 
<select name="mm" size=""> 
<option value= "name"> 44 ff « /option> 
<option value= "maker"> 制 造 商 < /option> 
<option value- "model"> 规 格 < /option> 
</select> 
&nbsp; 
输入 关键 字 < input type="text" name= "key" size="15"> 
«input type="submit” value= # if] > 
</form> 
</center> 
< /body» 
</html> 


2. PageShow. jsp 页 面 代码 


<%@page language- "java" import="java.sql. * " pageEncoding- "GB2312"% > 
X body bgcolor-white» 
<center> 
<table width= "600" border- "2" cellspacing- "1" cellpadding="1"> 
<tr align="center"> 
<td height="30" align="center"> < span class="goodtitle">< font size- 6 face=" 幼 
圆 "> 查询 商品 列表 < /font> < /span>< /td> 
</tr> 
</table> 
< table width= "600" border= "2" cellspacing- "0" cellpadding- "0" height 
="10"> 
«tr» 
<td width= "120" height- "10" align- "center"> 商 品名 称 < /td> 
<td width= "120" height="30" align= "center"> 商 品类 型 </td> 
<td width= "120" height="30" align= "center"> 商 品 价格 < /td> 
<td width= "120" height="30" align= "center"> 库 存 数 量 </td> 
<td width= "120" height= "30" align= "center"> 制 造 商 < /td> 
</tr> 
<t 
String keyl- (String) session.getAttribute ("keyl"); 
String key- (String)session.getAttribute ("key") ; 
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int PageSize=5; 
int RecordCount; 
int PageCount; 
int Page=1; 
int i; 
String SPage= request .get Parameter ("page") ; 
if (SPage==null) { 
Page=1; 
) 
else{ 
Page= java. lang. Integer.parseInt (SPage) 7 
if (Page< 1) Page=1; 
) 
String sql- "SELECT * FROM Goods WHERE "+keyl+" LIKE '$"+key+"%'"; 
Class.forName ("org.gjt.mm.mysql.Driver"); 
Connection 
con- DriverManager. getConnection ( " jdbc: mysql: //localhost: 3306/vote"," root", 
"123456"); 
Statement stmt=con.createStatement (ResultSet.TYPE SCROLL 
INSENSITIVE,ResultSet.CONCUR READ ONLY); 
ResultSet rs- stmt.executeQuery (sql); 
rs.last(); 
RecordCount- rs.getRow(); 
PageCount- (int) (RecordCount+ PageSize- 1) /PageSize; 
if (Page> PageCount) 
Page- PageCount; 
if (PageCount> 0) ( 
rs.absolute((Page- 1) * PageSize+1); 
i-0; 
while (i< PageSize&&!rs.isAfterLast ()) { 
> 
«tr» 
<td width- "120" height- "10" align="center"><%=rs.getString ("name") 
$»«/td» 
<td width-"120" height="10" align="center"> <% = rs.getString (" 
model") $»«/td» 
< td width-" 120" height="10" align="center"> <% = rs.getFloat 
("price") $»«/td» 
< td width=" 120" height-" 10" align="center"> <% = rs. getInt 
("number") s></td> 
<td width-"120" height="10" align="center"> <% = rs.getString (" 
maker") ></td> 
</tr> 
<% 
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> 
</table> 
<hr> 
<h5> 
<div align="center"> 
第 <s=Page s> 页 共 <$= PageCount $» Ji 
«t 
if (Page< PageCount) ( 
$> 
<a href= "PageShow. jsp? page- « $ - Page* 1$ > "> 下 一 页 </a> 
<% 
} 
if (Page> 1) { %> 
<a href= "PageShow. jsp? page= <%= Page-1 $» "» E — JE « /a» 


<% 
} 
$> 
</div> 
</h5> 
</center> 
</body> 
</html> 


通过 本 案例 的 操作 ,读者 可 以 充分 熟悉 如 何 通过 JDBC 连接 数据 库 并 对 数据 库 做 增 、 
删改 , 查 等 相应 的 操作 ,学 会 如 何在 JSP 中 实现 分 页 的 功能 。 


本 章 小 结 


本 章 对 JDBC 连接 数据 库 的 知识 进行 了 简单 的 介绍 .读者 通过 本 章 的 学 习 可 以 了 解 
数据 库 MySQL 及 管理 工具 SQLyog 的 安装 与 配置 ,了 解 JDBC 概念 工作 原理 及 相关 的 
驱动 类 型 ,掌握 JDBC 访问 数据 库 步 又 并 学 会 使 用 DBC 连接 数据 库 编 写 相应 的 应 用 
程序 。 


一 、 选 择 题 
1. JDBC 中 负责 处 理 驱动 的 调 入 并 产生 对 新 的 数据 库 连 接 支持 的 接口 是 ( js 
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的 是 ( 


T; 


A. DriverManager B. Connection C. Statement D. ResultSet 


. JDBC 提供 3 个 接口 来 实现 SQL 语句 的 发 送 ,其 中 执行 简单 不 带 参数 SQL 语句 


s 
A. Statement 类 B. PreparedStaternent 类 
C. CallableStatement 类 D. DriverStatement 类 
.Staternent 类 提供 3 种 执行 方法 ,用 来 执行 更 新 操作 的 是 ( ”)。 
A. executeQuery() B. executeUpdate() 
C. execute() D. query) 


. 下 面 ( ) 项 不 是 JDBC 的 工作 任务 。 


A. 与 数据 库 建立 连接 

B. 操作 数据 库 , 处 理 数 据 库 返回 的 结果 
C. 在 网 页 中 生成 表格 

D. 向 数据 库 管理 系统 发 送 SQL 语句 


。 下 面 ( ) 不 是 加 载 驱动 程序 的 方法 。 


A. 通过 DriverManager. getConnection 方法 加 载 
B. 调用 方法 Class. forName 

C. 通过 添加 系统 的 jdbc. drivers 属性 

D. 通过 registerDriver 方法 注册 


. 关于 分 页 显示 ,下 列 ( ) 是 不 正确 的 。 


A. 只 编制 一 个 页 面 是 不 可 能 实现 分 页 显示 的 

B. 采用 1 一 3 个 页 面 都 可 以 实现 分 页 显示 

C. 分 页 显示 中 ,记录 集 不 必 在 页 面 跳 转 后 重新 生成 

D. 分 页 显示 中 页 面 显示 的 记录 数 可 以 随 用 户 输入 调整 

DriverManager 类 的 getConnection(String url. String user. String password) 方 法 中 ， 


参数 url 的 格式 为 jdbc: 去 子 协议 二 : 去 子 名 称 二 ,下列 ( )url 是 不 正确 的 。 


8. 


9. 


A. "jdbe: mysql: //localhost: 80/ 数 据 库 名 " 

B. "jdbc; odbc: 数据 源 ” 

C. "jdbe: oracle: thin@host: 端口 号 : 数据 库 名 " 

D. "jdbc; sqlserver: //172. 0. 0.1: 1443;DatabaseName 一 数据 库 名 " 
在 JDBC 中 ,下 列 ( ) 接 口 不 能 被 Connection 创建 。 

A. Statement B. PreparedStatement 

C. CallableStatement D. RowsetStatement 


下 面 是 加 载 JDBC 数据 库 驱 动 的 代码 片段 : 


try{ 


H 


Class.forName (sun. jdbc.odbc.JdbcOdbcDriver"); 


catch (ClassNotFoundException e) { 


out.print (e); 


第 7 章 “”JDBC 数 据 库 连 接 225 


} 


该 程序 加 载 的 是 ( ) 驱 动 。 
A. JDBC-ODBC 桥 连 接 B. 部 分 Java 编写 本 地 
C. 本 地 协议 纯 Java D. 网 络 纯 Java 
10. 下 面 是 创建 Statement 接口 并 执行 executeUpdate 方法 的 代码 片段 : 


conn- DriverManager.getConnection ("jdbc:odbc:book","",""); 

stmt=conn.createStatement () ; 

String strsql- "insert into book values('TP003', 'JAVA', 'Flora', "清华 大 学 出 版 社 '， 
35)"; 

n- stmt .executeUpdate (strsql); 


代码 执行 成 功 后 n 的 值 为 ( )。 
A. 1 B. 0 C, —1 D. 一 个 整数 
11. 下 列 代码 生成 了 一 个 结果 集 : 
conn- DriverManager.getConnection (uri, user, password) ; 
stmt=conn.createStatement (ResultSet .TYPE_SCROLL_ SENSITIVE, 
ResultSet.CONCUR READ ONLY); 
rs-stmt.executeQuery ("select * from book"); 


下 面 ( ) 对 该 rs 描述 正确 。 
A. 不 能 用 结果 集中 的 数据 更 新 数据 库 中 的 表 
B. 能 用 结果 集中 的 数据 更 新 数据 库 中 的 表 
C. PUT update 方法 能 更 新 数据 库 中 的 表 
D. 不 确定 

12. 下 列 代码 生成 了 一 个 结果 集 : 


conn= DriverManager.getConnection (uri, user, password) ; 
stmt=conn.createStatement (ResultSet .TYPE_SCROLL_SENSITIVE, 
ResultSet.CONCUR READ ONLY); 

rs-stmt.executeQuery("select * from book"); 


下 面 ( ) 对 该 rs 描述 是 正确 的 。 
A. 数据 库 中 表 数 据 变化 时 结果 集中 数据 不 变 
B. 数据 库 中 表 数 据 变化 时 结果 集中 数据 同步 更 新 
C. 执行 update 方法 能 与 数据 库 中 表 的 数据 同步 更 新 
D. 不 确定 

13. 下 列 代码 生成 了 一 个 结果 集 : 


conn= DriverManager.getConnection (uri,user,password); 
stmt-conn.createStatement (ResultSet.TYPE SCROLL SENSITIVE, 
ResultSet.CONCUR READ ONLY); 

rs-stmt.executeQuery ("select * from book"); 
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rs.first(); 


下 面 ( ) 对 该 rs 描述 是 正确 的 。 

A. rs.isFirst() 为 真 B. rs. ifLast() 为 真 

C. rs.isAfterLast() 为 真 D. rs. isBeforeFirst() 为 真 
14. 下 列 代码 生成 了 一 个 结果 集 : 


conn- DriverManager.getConnection (uri, user, password) ; 
stmt=conn.createStatement (ResultSet .TYPE_ SCROLL SENSITIVE, 
ResultSet.CONCUR READ ONLY); 

rs-stmt.executeQuery ("select * from book"); 


rs.first();rs. previous(); 
Tic ) 对 该 rs 描述 是 正确 的 。 

A. rs, isFirst ) 为 真 B. rs. ifLast() 为 真 

C. rs.isAfterLast() 为 真 D. rs. isBeforeFirst() 为 真 
15. 下 列 代码 生成 了 一 个 结果 集 : 
conn=DriverManager.getConnection (uri, user, password) ; 
stmt=conn.createStatement (ResultSet .TYPE_SCROLL_SENSITIVE, 


ResultSet .CONCUR_READ ONLY); 
rs=stmt.executeQuery ("select * from book"); 





rs.last(); 
rs.next(); 
下 面 ( ) 对 该 rs 描述 是 正确 的 。 
A. rs.isFirst() 为 真 B. rs. ifLast() 为 真 
C. rs. isAfterLast ) 为 真 D. rs. isBeforeFirst ) 为 真 


16. 给 出 了 如 下 的 查询 条 件 字 符 串 
String condition- "insert book values (?,2,2,2,2)"; 


TK ) 接 口 适合 执行 该 SQL 查询 。 


A. Statement B. PrepareStatement 
C. CallableStatement D. 不 确定 

二 、 填空 题 

1. JDBC 的 英文 全 称 是 ,中 文 含义 是 





2. 简单 地 说 ,JDBC 能 够 完成 下 列 三 件 事 : 与 一 个 数据 库 建立 连接 (connection)、 


3. JDBC 主要 由 两 部 分 组 成 : 一 部 分 是 访问 数据 库 的 高 层 接口 , 即 通常 所 说 的 

; 另 一 部 分 是 由 数据 库 厂商 提供 的 使 Java 程序 能 够 与 数据 库 连 接 通 信 的 驱动 程 

序 , 即 

4. 目前 ,JDBC 驱动 程序 可 以 分 为 四 类 : š i 5 
5. 数据 库 的 连接 是 由 JDBC 的 管理 的 。 
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6. 下 面 的 代码 建立 MySQL 数据 库 的 连接 ,请 填空 ; 


try{ Class.forName (" s» 
$ 


创建 连接 的 代码 如 下 : 
try{ // 和 数据 库 建立 连接 


conn= 
DriverManager.getConnection ( 
//localhost :3306/booklib", "root","") 7 


conn.close(); 
} 
catch (Exception e) { 
out.println(e.toString()); 
H 


7. 查询 结果 集 ResultSet 对 象 是 以 统一 的 行列 形式 组 织 数据 的 ,执行 “ResultSet rs 一 
stmt. executeQuery ("select bid. name. author. publish. price from book");” 语 句 , 得 到 的 结果 
集 rs 第 一 列 对 应 ;而 每 一 次 rs 只 能 看 到 行 ,要 再 看 到 下 一 行 ,必须 使 用 

方法 移动 当前 行 。ResultSet 对 象 使 用 方法 获得 当前 行 字 段 的 值 。 

8. stmt 为 Statement 对 象 ,执行 “String sqlStatement =" delete from book where bid= 
《p1001'";” 语 句 后 ,删除 数据 库 表 的 记录 需要 执行 “stmt. executeUpdate ( ); "语句 。 

9. 下 面 代码 是 使 用 数据 库 连接 池 获 得 连接 的 代码 片段 : 





Connection conn; 

Context initCtx-new InitialContext (); 

Context ctx= (Context) initCtx. lookup ("java:comp/env") ; 
// 获 取 连 接 池 对 象 

Object obj= (Object) ctx. lookup ("jdbc/dataBook"); 

// 类 型 转换 

javax.sql.DataSource ds= (javax.sql.DataSource) obj; 
// 得 到 连接 


conn=ds. 


三 、 简 答题 

1. 什么 是 JDBC? 它 在 访问 数据 库 时 起 的 作用 是 什么 ? 

2. 简 述 JDBC 连接 数据 库 的 基本 步骤 。 

3. JDBC 中 提供 的 两 种 实现 数据 查询 的 方法 分 别 是 什么 ? 

四 、 程 序 题 

建立 一 个 JSP 文件 ,通过 JDBC 连接 数据 库 ,然后 执行 如 下 操作 : 

* 在 雇员 表 emp 中 插入 几 行 测试 数据 (英文 数据 .日 期 格式 为 YYYY-MM-DD)。 
。 查看 表 中 的 数据 。 
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- 修改 表 中 的 某 条 记录 。 
t 删除 表 中 的 某 条 记录 。 


具体 要 求 如 下 : 
(1) 启动 MySQL 的 命令 行 管理 工具 ,用 MySQL 的 建 库 语 句 建立 一 个 名 为 company 
的 数据 库 。 


(2) 在 company 库 中 建立 雇员 表 emp, 表 的 数据 项 及 数据 类 型 如 下 所 示 ; 


empno int (4) not null primary key, 
ename varchar (10), 

job varchar (10), 

hiredate datetime, 

salary double 


(3) 文件 jdbcAdd. jsp 实现 在 emp 表 中 插入 两 条 记录 并 查看 插入 后 表 中 的 数据 , 文 
件 运行 结果 如 图 7-27 所 示 。 


往 数据 库 表 中 插入 记录 — Windows Internet Explorer DE 








OO- Bisnes x | 
i Xt MO SEV BRAW TAO MO 
** o (eneeermace [| REV Roc 














插入 两 条 记录 后 表 中 的 数据 

雇员 编号 雇员 姓名 [雇员 工作 雇用 日 期 ERIA 
1 Tom worker | 2016-06-02 00:00:00. 0/5000 

2 Mary manager | 2016-06-02 00:00:00. 0/5000 

3 Jerry (CEO 2016-06-02 00:00:00. 0/50000 | 








Q Internet Aix - 


图 7-27 往 表 中 插入 两 条 记录 


(4) 文件 jdbcUpdate. jsp 实现 将 emp 表 中 编号 为 2 的 记录 的 工资 修改 为 6000 ,并 查 
看 插入 后 表 中 的 数据 ,文件 运行 结果 如 图 7-28 所 示 。 








[id http: //Mocathost:i|¥)|| #4) [X | [oe 





RAO SEQ KARw IAD Wbo 
exsenemvce | || 从 主页 二 - Mec 











更 改 第 二 条 记录 中 的 工资 项 后 表 中 的 数据 
ERAS EREE RAL ERREUR ERIA 





Tom worker | 2016-06-02 00:00:00. 0/5000 
Mary manager |2016-06-02 00:00:00. 06000 
Jerry (CEO 2016-06-02 00:00:00. 0 [50000 














Q Internet AX ~ : 


图 7-28 修改 表 中 的 数据 
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(5) 文件 jdbcDelete. jsp 实现 将 emp 表 中 编号 为 1 的 记录 删除 ,并 查看 插入 后 表 中 
的 数据 ,文件 运行 结果 如 图 7-29 所 示 。 


C 往 数 据 库 表 中 插入 记录 — Windows Internet Explorer 
OO- Anyo] | 

文件 到 ) SEO SEW KRW TAD HHwW 

& & Merrem i Rime -Do 


























删除 第 一 条 记录 后 表 中 的 数据 
次 员 编 号 雇员 姓名 | 雇员 工作 雇用 日期 雇员 工资 
[Mary manager [2016-06-02 00:00:00. 0 [6000 


llerry — (EO 2016-06-02 00:00:00. 0 [50000 





Q Internet Aux ~ 


图 7-29 删除 表 中 的 记录 
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JavaBean 与 Servlet 





8.1 JavaBean 概述 





JavaBean 是 一 种 Java 类 ,通过 封装 属性 和 方法 成 为 具有 某 种 功能 或 者 处 理 某 个 具体 
业务 的 对 象 , 简称 Bean, JavaBean 是 一 个 可 重复 使 用 的 .基于 Java 的 软件 组 件 ,将 
JavaBean 与 JSP 语言 元 素 一 起 使 用 ,可 以 很 好 地 实现 后 台 业 务 逻 辑 和 前 台 表 示 逮 辑 的 分 
离 ,使 得 JSP 页面 更 加 可 读 、 易 维护 。 

JavaBean 的 数据 成 员 属 性 都 是 具有 private 或 protect 型 成 员 变量 ,从 组 件 外 只 能 通 
过 与 该 属性 相关 的 一 对 访问 方法 来 设置 或 读 取 属 性 的 值 。 这 对 访问 方法 即 getter 方法 
CELA) Al setter( 设 置 嚣 ) 方 法 ,符合 下 面 设计 规则 的 任何 Java 类 都 是 一 个 JavaBean: 

COD 对 于 数据 类 型 protype 的 每 个 可 读 属 性 ,Bean 必须 有 下 面 签名 的 一 个 方法 : 





public proptype getProperty() { } 

(2) 对 于 数据 类 型 protype 的 每 个 可 写 属性 ,Bean 必须 有 下 面 签名 的 一 个 方法 : 

public setProperty (proptype x) { } 

(3) 定义 一 个 不 带 任何 参数 的 构造 函数 。 

JavaBean 是 基于 Java 语言 的 ,具有 以 下 特点 : 

CD. 可 以 实现 代码 的 重复 利用 ,因此 可 以 缩短 开发 时 间 。 

D DRE DAP a BA 

(3) 可 以 在 任何 安装 了 Java 运行 环境 的 平台 上 使 用 ,而 不 需要 重新 编译 ,为 JSP 的 
应 用 带 来 了 更 多 的 可 扩展 性 。 


8.2 与 JvavBean 相关 的 JSP 动作 组 件 





JSP 页面 中 与 JavaBean 有 关 的 标记 有 三 个 ,分 别 是 二 jsp: useBean >, — jsp: 
setProperty> fil<jsp: getProperty >. JHP <jsp: useBean 二 声明 一 个 具有 一 定 生存 范 
目 及 一 个 唯一 id 的 JavaBean 的 实例 .JSP 页 面 通过 id 识别 JavaBean. Jf nf 38i 3. id 
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. method 类 似 的 语句 来 操作 JavaBean。 
例如 ,下 面 的 标记 在 应 用 程序 作用 域 中 ,声明 了 类 型 Student 的 id 为 s1 的 Bean: 
<jsp:useBean id- "sl" class= "Student" scope="application"/> 
其 中 id 属性 是 在 整个 页 面 引用 Bean 的 唯一 值 ,在 所 定义 的 范围 中 确认 Bean 的 变量 ,使 
之 能 在 后 面 的 程序 中 使 用 此 变量 名 分 辨 不 同 的 Bean, 这 个 变量 名 区 分 大 小 写 , 必 须 符合 
所 使 用 的 脚本 语言 的 规定 ,这 个 规定 在 Java 语言 规范 已 经 写 明 。 
<jsp: useBean 二 利用 Scope 属性 来 声明 JavaBean 的 生存 范围 ,Scope 的 取 值 范围 有 
4 种 , 即 : page、request、session、application,Bean 只 有 在 它 定义 的 范围 里 才能 使 用 ,在 它 
的 活动 范围 外 将 无 法 访问 到 它 ,默认 值 是 pages 
class 属性 是 JavaBean 的 类 名 , 即 Bean 的 . class 文件 的 路 径 和 文件 名 。 
type 属性 是 引用 此 对 象 的 变量 的 类 型 ,如 果 使 用 type 属性 的 同时 没有 使 用 class 或 
beanName,Bean 将 不 会 被 实例 化 。 注 意 package 和 class 的 名 称 区 分 大 小 写 。 
<jsp: setProperty 记 用 来 设 定 一 个 已 被 创建 的 Bean 组 件 的 属性 值 ,用 法 如 下 : 
< jsp: setProperty name =" beanId" property =" propertyName" value = 
"propertyValue"/> 
其 中 name 属性 对 应 着 JavaBean 组 件 的 id f» property 属性 指明 要 设 定 属性 值 的 属性 
名 ,value 为 设 定 的 属性 值 ,这 个 值 可 以 是 字符 串 也 可 以 是 表达 式 。 


<jsp:setProperty name= "sl" property= "classno" value= "56789"/» 
其 说 明 如 表 8-1 所 示 。 
表 8-1 setProperty 属性 说 明 
属 性 说 o m" 





Bean 实例 的 名 称 , 它 必须 已 经 被 一 jsp: useBean> thrid HEAT TM. PEGETE- jsp: 
setProperty- 'P ff] 4 FUM — jsp: useBean rid rh ff 4 FFE 


name 





正在 被 设置 值 的 Bean 属性 的 名 字 ,如 果 property 属性 有 值 * * ”, 标 记 就 会 在 请 求 对象 
中 浏览 所 有 的 参数 去 寻找 所 匹配 的 请 求 参数 的 名 称 ,并 且 在 Bean 中 输入 属性 名 称 和 类 
Property | 型 。 请求 中 的 值 被 赋 给 每 个 所 匹配 的 Bean 属性 ,除非 请 求 参 数 有 值 ,否则 不 会 改变 
Bean 的 属性 





当 从 请 求 参数 中 设置 Bean 的 属性 时 ,Bean 的 属性 名 称 不 必 与 请 求 参数 中 所 定义 的 名 
称 相同 。 用 这 个 属性 来 定义 请 求 参数 的 名 称 , 要 用 它 的 值 来 设置 Bean 的 属性 。 如 果 没 
pm 有 定义 param 值 ,就 认为 请 求 参数 的 名 称 与 Bean 属性 的 名 称 相同 。 如 果 没 有 该 名 称 的 
请 求 参数 ,或 者 它 的 值 为 "", 则 这 个 动作 对 Bean 没有 影响 





要 赋 给 Bean 属性 的 值 。 它 可 以 是 一 个 请 求 时 的 属性 ,或 者 可 以 接受 一 个 表达 式 作为 它 
的 值 (一 个 标记 不 能 够 同时 具有 param 和 value 属性 ) 


value 








jsp: setProperty 盖 标准 标记 与 在 前 面部 分 中 介绍 的 二 jsp: useBean- zl f — E Sk 
使 用 ,来 设置 Bean 的 属性 值 。 比 如 对 于 一 个 位 于 mypackage 包 下 的 Student 的 Bean, 具 
体 匹 配 过 程 如 图 8-1 所 示 。 
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mypackage.Student 
public class Student { 
beans. html private String cl: 
<form method="post" action="beans.jsp"> public void set. 
<p>Please enter your username: this.classno =, 








<input type="text" name="classno"> } 

















beans.jsp 





<jsp:useBean id=“s1" scope="page" 
<jsp:setProperty name=“s1" property= 
</isp:useBean> 














图 8-1 JSP 元 素 与 JavaBean 变量 匹配 过 程 
"o ”代表 所 有 的 , 即 匹配 所 有 beans. html 页 面 中 控件 名 称 与 Javabean 中 变量 名 字 
一 样 的 项 。 
<jsp: getProperty 二 用 来 返回 一 个 已 被 创建 的 Bean 组 件 的 属性 值 , 它 访问 属性 的 
值 , 并 且 把 该 值 转换 为 String, 然 后 输出 到 客户 的 输出 流 当 中 。 用 法 如 下 : 
<jsp:getProperty name- "beanId" property- "propertyName" /> 


其 中 ,name 属性 对 应 JavaBean 组 件 的 id (A, property 属性 指明 要 获取 的 JavaBean 属性 
名 称 , 这 两 个 属性 都 是 必需 的 。 


8.3 JavaBean 与 JSP 的 结合 应 用 





JavaBean 需要 与 JSP 页 面 结 合 在 一 起 使 用 ,具体 用 法 如 下 例 所 述 。 

例 8-1 使 用 JavaBean 与 JSP 结合 实现 一 个 简单 的 计数 器 程序 。 

程序 分 析 : 本 例 程 共 包 含 三 个 文件 : JavaBean 一 counter. java 文件 ,JSP 一 counter. jsp 文 
TF ,counterl. jsp 文件 。 其 中 ,counter. java 主要 用 来 进行 计数 器 的 计数 操作 ,counter. jsp 
和 counter]. jsp 文件 主要 用 来 显示 网 页 的 计数 。 


counter. java X ff: 


package count; 


public class counter ( 


int count-0; // 初 始 化 JavaBean 的 成 员 变量 

public counter() { //Class 构造 函数 

} 

public int getCount() { // 属 性 Count 的 Get 7j 1k 

count; // 计 数 操作 ,每 次 请 求 都 进行 计数 器 加 1 


return this.count; 


} 
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public void setCount (int count) { // 属 性 Count 的 set 方法 
this.count=count; 

} 

} 


上 而 程序 是 JavaBean 的 编写 ,下 面 编写 counter. jsp 文件 来 使 用 该 JavaBean: 





<HTML> 
«HEAD» 
X TITLE» counter < /TITLE» 
< /HEAD> 
«BODY» 
«H1» JBuilder Generated JSP < /H1» 
< 上 -初始 化 counter 这 个 Bean, Sc Bl 9 bean0- -> 
€ jsp:useBean id- "bean0" scope- "application" class- "count.counter" /> 
<% out.println("The Counter is : "+bean0.getCount ()+ "<BR> ") 
$> 
</BODY> 
</HTML> 


该 程序 中 使 用 out. println 方法 显示 当前 的 属性 count 的 值 , 也 就 是 计数 器 的 值 ,下 
面 的 counter]. jsp 将 使 用 另 一 种 方法 : 
counterl. jsp 文件 : 


<HTML> 

<HEAD> 

<TITLE> counter < /TITLE> 

< /HEAD> 

«BODY» 

« H1» JBuilder Generated JSP < /H1» 

<!- 初 始 化 counter 这 个 Bean, S: fl Jj bean0- -> 

<jsp:useBean id- "bean0" scope- "application" class- "count.counter" /> 
« 1 f HI jsp:getProperty 标记 得 到 count 属性 的 值 , 也 就 是 计数 器 的 值 --> 
The Counter is : 

« jsp:getProperty name- "bean0" property- "count" /><BR> 

< /BODY» 

</HTML> 


从 这 个 例子 不 难看 出 JSP 和 JavaBean 应 用 的 一 般 操作 方法 ,首先 在 JSP 页 面 中 要 声 
明 并 初始 化 JavaBean, 这 个 JavaBean 有 一 个 唯一 的 id 标志 ,还 有 一 个 生存 范围 scope( 设 
YW application 是 为 了 实现 多 个 用 户 共 享 一 个 计数 器 的 功能 .如 果 要 实现 单个 用 户 的 计 
数 功能 .可 以 修改 scope 为 session), 最 后 还 要 制定 JavaBean 的 class 来 源 count 


. counter: 


« jsp:useBean id="bean0" scope- "application" class- "count.counter" /> 
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接着 就 可 以 使 用 JavaBean 提供 的 public 方法 或 者 直接 使 用 二 jsp: getProperty 二 标 
记 来 得 到 JavaBean 中 属性 的 值 : 


out.println("The Counter is : "*bean0.getCount () * "<BR> ") ; 
或 者 : 
« jsp:getProperty name= "bean0" property- "count" /> 


这 样 就 可 以 运行 程序 了 ,然后 多 刷新 几 次 ,注意 观察 计数 器 的 变化 。 
JavaBean 在 JSP 程序 中 常用 来 封装 业务 逻辑 数据 库 操 作 等 等 ,可 以 很 好 地 实现 业 
务 逻 辑 和 前 台 程序 的 分 离 ,使 得 系统 具有 更 好 的 健壮 性 和 灵活 性 。 比 如 说 ,电子 商务 平台 
中 的 一 个 购物 车 程序 ,要 实现 购物 车 中 添加 商品 的 功能 ,就 可 以 写 一 个 购物 车 操作 的 
JavaBean, 建 立 一 个 public 的 AddItem 成 员 方 法 ,前 台 ISP 文件 里 面 直接 调用 这 个 方法 。 
如 果 后 来 又 考虑 添加 商品 的 时 候 需 要 判断 库存 是 否 有 货物 ,没有 货物 不 得 购买 ,在 这 个 时 
候 就 可 以 直接 修改 JavaBean 的 AddItem 方法 ,加 入 处 理 语句 来 实现 ,这 样 就 完全 不 用 修 
改 前 台 JSP 程序 了 。 当 然 , 也 可 以 把 这 些 处 理 操作 完全 写 在 ISP 程序 中 ,不 过 这 样 的 JSP 
页 面 可 能 就 有 成 百 上 千 行 ,只 看 代码 就 是 一 个 头疼 的 事情 .更 不 用 说 修改 了 。 读 者 如 果 使 
用 ASP 开发 过 程序 ,相信 对 这 种 情况 会 深 有 体会 。 
由 此 可 见 , 通 过 JavaBean 可 以 很 好 地 实现 业务 逻辑 的 封装 ,使 得 程序 易于 维护 。 在 
使 用 JSP 开发 应 用 程序 时 一 个 很 好 的 习惯 就 是 多 使 用 JavaBean。 
例 8-2 使 用 JavaBean 实现 一 个 简单 的 购物 车 。 
编写 一 个 购物 车 Bean(Car. java) 实 现 添加 商品 到 购物 车 、 列 出 购物 车 中 的 商品 以 及 
删除 货物 等 功能 ,页 面 car. jsp 使 用 该 购物 车 Bean, 页面 add. jsp 用 来 添加 商品 ,页 面 
selectRemovedGoods .jsp 及 removeWork .jsp 用 来 删除 购物 车 中 的 物品 。 
用 JavaBean 程序 Car. java 实现 购物 车 。 哈 希 表 (Hashtable list) 对 象 代 表 购 物 车 , 存 
放 客 户 选择 的 各 种 商品 。 用 方法 list. put(item,str) 将 商品 放 入 购物 车 。 通 过 循环 获得 
购物 车 中 所 有 商品 的 信息 。 实 现 购物 车 的 代码 如 下 : 
(1) Car. java. 
package com. jsp; 
import java.util. * ; 
import java.io.* ; 
public class Car implements Serializable 
{ Hashtable list=new Hashtable (); 
String item="Welcome!"; 
int mount=0; 
String unit=null; 
public void Car() 
4-3 
public void setitem(String item) 
{ this.item-item; 


} 
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public void getitem( ) 
{ return item; 
} 
public void setunit (String unit) 
{ this.unit=unit; 
} 
public void getunit ( ) 
{ return unit; 
} 
public void setmount (int mount) 
{ this.mount=mount; 
} 
public void getmount ( ) 
{ return mount; 


} 


服务 器 功能 扩展 技术 


public void add() // 添 加 商品 到 购物 车 


(String str-"Name: "+item+" Mount:"+mount+" Unit:"+unit; 


list .put (item, str); 
} 


public Hashtable list () // 列 出 购物 车 中 的 商品 


{ return list; 


} 


public void delete (String s) // 删 除 货物 { list.remove (s); 


} 
) 


(2) car. jsp. 


<% 6 page contentType- "text/html;charset-GB2312" %> 


<%@page import-"java.util.* " $5 
<HTML> 
<BODY> < Font size=10> 


<jsp:useBean id= "carl" class= "com.jsp.Car" scope- "session"» 


</jsp:useBean> 


<P> 您 好 ,这 里 是 中 央 商 场 , 选 择 您 要 购买 的 商品 添加 到 购物 车 : 
<% String str- response .encodeRedirectURL ("add. jsp") 


ax 

<P> 您 的 购物 车 中 有 如 下 商品 : 

<%Hashtable list-carl.list(); 
Enumeration enum-list.elements(); 


while (enum.hasMoreElements ()) 


{ String goods= (String) enum.nextElement () ; 
byte b[]=goods.getBytes ("ISO- 8859-1") 


goods=new String (b) ; 
out.print ("<BR> "+ goods) ; 
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H 
$> 
<% String strl= response.encodeRedirectURL ("selectRemovedGoods.jsp"); 
s» 


<FORM action-"«$-strl$»" method-post name= form» 

«Input type- submit value- "修改 购物 车 中 的 货物 "> 

< /FORM> 

< /FONT> 

</BODY> 

</HTML> 

JSP 页 面 程序 显示 购物 车 中 已 有 的 商品 并 让 客户 继续 选择 。 语 名 “所 jsp: useBean id= 

" com. jsp. Car" scope =" session" 二 ”表示 引用 JavaBean, 其中, “id = 

"carl"” 表 示 Bean 在 该 页 面 的 引用 对 象 名 为 car1; *class — " com. jsp. Car"” 表 示 该 Bean 

的 Java 类 文件 名 为 Car, 即 Car. class 文件 , 它 存放 在 JavaBean 的 部 署 目录 下 的 子 目 录 

ope— "session" "表示 与 jsp 相互 连接 的 页 面 也 有 语句 “二 jsp: useBean 
ss— "com. jsp. Car" scope 一 "session" 之 ”, 则 它们 使 用 相同 的 Bean 实例 ,或 

者 说 ,此 时 具有 相同 sessionID 的 页 面 共享 一 个 Bean 实例 (共用 一 个 购物 车 ), 相 反 地 ,不 

同 用 户 的 sessionID 也 不 同 , 不 会 出 现 取 的 物品 放 入 他 人 购物 车 中 的 情况 。 

实现 的 购物 车 主 界面 页 面 如 图 8-2 所 示 。 


您 好 ， 这 里 是 中 央 商 场 ， 选 择 您 要 购买 的 商 剖 
添加 到 购物 车 : 

给 入 购买 的 数量 : 

选择 计量 单位 : 。 个 。 公 斤 oft Mi 
您 的 购物 车 中 有 如 下 商品 : 


RL | 


"carl" class= 

















图 8-2 购物 车 主 界面 


(3) add. jsp 程序 显示 购物 车 中 已 有 的 商品 并 让 客户 继续 选择 需要 添加 的 商品 。 


add.jsp: 
<%@page contentType- "text/html;charset-GB2312" %> 
<%@page import="java.util. * "> 
<HTML> 
«BODY» «Font size=10> 
« jsp:useBean id- "carl" class- "com.jsp.Car" scope- "session"» 
</jsp:useBean> 


<jsp:setProperty name="carl" property="*" /> 
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<%carl.add(); 

$» 

<P> 您 的 购物 车 中 有 如 下 商品 : 

<%Hashtable list-carl.list(); 

Enumeration enum list.elements () 
while (enum.hasMoreElements ()) 
{ String goods= (String) enum.nextElement () 7 

byte b[]=goods.getBytes ("ISO- 8859- 1") ; 
goods=new String (b); 
out.print ("<BR> "+ goods) ; 


8» 

<%String str- response.encodeRedirectURL ("car.jsp"); 

8» 

X BR» « FORM action- "«$- str$ >" method=post name= form» 
«Input type- submit value- "继续 购物 "> 

</FORM> 

<%String strl- response.encodeRedi rectURL ("selectRemovedGoods.jsp") ; 
$> 

<BR>< FORM action="< %$=str1$% >" method- post name= form» 
«Input type= submit value= "修改 购物 车 中 的 货物 "> 

< /FORM> 

< /FONT> 

< /BODY> 

< /HIML> 


显示 及 添加 商品 的 页 面 如 图 8-3 所 示 。 
您 的 购物 车 中 有 如 下 商品 : 


Name: TV Mount:6 Unit: 台 











让 


图 8-3 添加 商品 界面 





(4) 删除 购物 车 中 的 商品 。 


selectRemovedGoods.jsp: 

<%@page contentType- "text/html ;charset=GB2312" %> 
<%@page import="java-util.* " $5 

<HTML> 

«BODY» «Font size=10> 


« jsp:useBean id-"carl" class- "com.jsp.Car" scope- "session"» 
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</jsp:useBean> 
<P> 选 择 从 购物 车 中 删除 的 商品 : 
<% String str=response.encodeRedirectURL ("removeWork.jsp"); 
s» 
X FORM action="< %=str% >" method-post name= form2» 
«Select name= "deleteitem" size=1> 
«Option value- "TV"» Hi BL EL 
«Option value- "apple" 3E JR 
«Option value- "coke"> 可 口 可乐 
<Option value= "milk"> 牛 奶 
«Option value- "tea"> 茶 叶 
</Select> 
<Input type= submit value= "提交 删除 "> 
</FORM> 
<P> 您 的 购物 车 中 有 如 下 商品 : 
<%Hashtable list-carl.list(); 
Enumeration enum= list.elements () 7 
while (enum. hasMoreElements () ) 
{ String goods= (String) enum.nextElement () ; 
byte b[]- goods.getBytes ("ISO- 8859- 1") ; 
goods- new String (b); 
out.print ("<BR> "+ goods) ; 


$> 

<$% String strl- response.encodeRedirectURL ("car.jsp"); 
&» 

<FORM action="< $—strl$»" method-post name= form» 
«Input type=submit value- "继续 购物 "> 

</FORM> 

< /FONT> 

</BODY> 

</HTML> 


删除 商品 的 页 面 如 图 8-4 所 示 。 
选择 从 购物 车 中 有 删除 的 商 咒 : 
em 司 


您 的 购物 车 中 有 如 下 商品 : 
ame: apple Mount:60 Unit: 公 斤 
ame: TV Mount:6 Unit: 





pæ 











图 8-4 删除 商品 界面 
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removeWork.jsp: 

«$6 page contentType- "text/html;charset-GB2312" %> 

<%@page import- "java.util. * " $5 

«HTML» 

« BODY» « Font size=10> 

« jsp:useBean id= "carl" class- "com.jsp.Car" scope- "session"» 
« /jsp:useBean» 

<% String name= request .getParameter ("deleteitem"); 


if(name--null) 





{name= 
} 
byte c[]=name.getBytes ("ISO- 8859- 1") ; 
name- new String (c); 
carl.delete (name) ; 
out.print (" 您 删除 了 货物 :"+ name) ; 
$> 


<P> 购 物 车 中 现在 的 货物 : 
<%Hashtable list-carl.list(); 
Enumeration enum- list.elements(); 
while (enum.hasMoreElements () ) 

{ String goods= (String)enum.nextElement () ; 
byte b[]- goods.getBytes ("ISO- 8859- 1") ; 
goods- new String(b); 
out.print ("<BR> "+ goods) ; 


$> 

<% String strl- response.encodeRedirectURL ("car.jsp"); 
$> 

<FORM action="< %=str1%>" method-post name= form» 

< Input type=submit value= "继续 购物 "> 

</FORM> 

<% String str= response.encodeRedirectURL ("selectRemovedGoods. jsp") ; 
5» 

<FORM action- "«$-str$»" method-post name= forml» 

« Input type- submit value- "修改 购物 车 中 的 货物 "> 
</FORM> 


删除 后 的 页 面 如 图 8-5 所 示 。 

在 实际 程序 项 目 开 发 过 程 中 ,涉及 的 更 多 的 还 是 和 数据 库 相 关 的 操作 ,在 电 商 平台 的 
开发 过 程 中 使 用 比较 频繁 .不 管 是 注册 E-mail、 有 奖 调查 、 购 买 物品 或 者 加 入 社区 等 等 都 
会 涉及 JSP 和 JavaBeans 对 数据 库 的 操作 。 

fi 8-3 {EJH JavaBean 建立 数据 库 连接 .在 ISP 中 显示 电 商 平台 的 员工 基本 信息 。 

程序 分 析 : 新 建 一 个 数据 库 shop. 其 字段 包含 id, name, sex, age, jiguang、 
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您 删除 了 货物 : TV 
移 物 车 中 现在 的 货物 : 


ame: apple Mount:60 Unit: 公 斤 
[uasa] 


[| 
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department, 分 别 表示 员工 的 工 号 、 姓 名 \ 性 别 \ 年 龄 . 籍 吐 和 部 门 。 
(1) 首先 编程 实现 一 个 JavaBean: MyDbBean。 


package com.DataBase; 
import java.sql.* ; 
public class MyDbBean 
t 
private Statement stmt- null; 
ResultSet rs-null; 
private Connection conn-null; 
private String url; 
public MyDbBean() ( } // 构 造 函 数 
// 根 据 url 参数 ,加 载 驱动 程序 ,建立 连接 
public void getConn (String dbname, String uid, String pwd) throws Exception 
{ 
try 
{ 
url-"jdbc:mysql://localhost:3306/"* dbname; 
Class. forName ("org.gjt.mm.mysql.Driver") .newInstance(); 
conn= DriverManager.getConnection(url, uid, pwd); 
) 
catch (Exception ex) 
{ 
System.err.printIn ("aq.executeQuery: "+ex.getMessage())7 


} 
// 执 行 查询 类 的 SQL 语句 ,有 返回 集 
public ResultSet executeQueryl (String sql) 
{ 

rs-null; 

try 

t 

stmt-conn.createStatement (ResultSet.TYPE SCROLL INSENSITIVE, ResultSet.CONCUR - 
READ ONLY); 
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rs-stmt.executeQuery (sql); 
} 
catch (SQLException ex) 
{ 
System.err.println ("aq.executeQuery: "+ ex.getMessage ()) ; 
} 
return rs; 
} 
// 执 行 更 新 类 的 SQL 语句 ,无 返回 集 
public void executeUpdate2 (String sql) 
{ 
stmt=null; 
rs-null; 
try 
t 
stmt- conn.createStatement (ResultSet.TYPE SCROLL INSENSITIVE, ResultSet. CONCUR_ 
READ ONLY); 
stmt .executeQuery (sql); 
stmt.close(); 
conn.close(); 
} 
catch (SQLException ex) 


{ 
System.err.println("aq.executeQuery: "+ex.getMessage())7 


} 
// 关 闭 对 象 
public void closeStmt () 
{ 

try(  stmt.close(); ) 

catch (SQLException ex) 

t 

System.err.println("aq.executeQuery: "+ex.getMessage()) 7 


H 
public void closeConn () 
t 
try( conn.close(); ) 
catch (SQLException ex) 
{ 
System.err.println("aq.executeQuery: "+ex.getMessage()) 7 
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(2) 创建 电 商 平台 员工 管理 列表 主页 面 。 


«$6 page contentType- "text/html" pageEncoding- "UTF- 8"$ > 
«$6 page import-"java.sql.* " $> 
« !DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
“http: //www.w3.org/TR/htm14/loose .dtd"> 
<jsp:useBean id= "testbean" scope- "session" class= "com. DataBase .MyDbBean” /> 
<html> 
<head> 
«meta http- equiv- "Content- Type” content= "text/html; charset=UTF- 8"> 
<title> 电 商 平 台 员工 管理 系统 < /title> 
</head> 
<%! String url,sql; $» 
<%! int i;%> 
<body bgcolor="# ffffff"> 
<div align="center"> < font color- "#000000" size= "5"> 员 工 管理 系统 </font> 
< /div> 
<table width= "75$" border- "1" cellspacing-"1" cellpadding="1" align="center"> 
<tr> 
<td width= 16% align=center> T. E « /td» 
<td width= 16% align=center> tt % </td> 
<td width= 8% align=center> fE Sill< /td> 
<td width= 8% align=center> 4E fff « /td> 
<td width= 16% align=center> fi ff < /td> 
<td width= 12% align=center> #1 </td> 
<td width= 12% align=center> HM < /td> 
<td width= 12% align=center> MM BR< /td> 
</tr> 
<% 
// 调 用 getConn 方法 与 数据 库 建立 连接 
testbean.getConn ("shop", "root", "123456") 7 
sql="select * from user"; 
ResultSet rs-testbean.executeQueryl (sql) ;// 查 询 数 据 库 
while (rs.next ()) { 
&> 
<tr> 
<td width= 16% align=center> <%=rs.getString(1)% ></td> 
<td width= 16% align=center> <%=rs.getString(2)% ></td> 
<td width= 8% align=center><%=rs.getString(3)% ></td> 
<td width= 8% align=center><%=rs.getInt (4)% ></td> 
<td width= 16% align=center><%=rs.getString(5)% ></td> 
<td width= 12% align=center><%=rs.getString(6)% ></td> 
<td width= 12% align=center><a href="change. jsp? id- « $— rs.getString (1)$ >"> BL « /a 
></td> 


扩 
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<td width- 12$ align- center» <a href="del.jsp? id=<$=rs.getString(1)%>"> M< /a> 


</tr> 
<% 
} 
rs.close(); 
testbean.closeStmt () ; 
testbean.closeConn(); 
$> 
</table> 
<div align="center"><a href- "insert.jsp"> 添 加 新 记录 < /a» « /div> 
< /body> 
</html> 


运行 效果 如 图 8-6 所 示 。 

















| 1000001 


| 1000002 
| 1000003 











图 8-6 员工 列表 显示 


添加 新 记录 页 面 及 修改 和 删除 的 功能 读者 可 以 自行 完成 。 


8.4 Servlet 概述 





Servlet 是 使 用 应 用 程序 接口 (API) 及 相关 类 和 方法 的 Java 程序 ,是 服务 器 端的 一 个 
展 技术 ,Servlet 程序 在 服务 器 端 运 行 并 隐藏 在 Servlet 容器 里 。Servlet 与 传统 的 从 命 





令 行 启动 的 Java 应 用 程序 不 同 ,Servlet 是 由 Web 服务 器 (如 Tomcat) 进 行 加 载 及 运行 
的 ,该 Web 服务 器 必须 包含 支持 Servlet 的 Java 虚拟 机 。 


Servlet 通过 扩展 服务 器 的 功能 响应 客户 端的 请 求 ,动态 地 生成 Web 页 面 。Servlet 


技术 是 使 用 Java 进行 Web 应 用 编程 的 基础 ,也 是 JSP 的 基础 。 实 际 上 ,所 有 的 JSP 程序 
都 是 由 Web 服务 器 转换 成 Servlet 程序 执行 的 。Servlet 程序 与 客户 交互 时 ,至 关 重 要 的 
就 是 Web 容器 ,Web 容器 负责 处 理 客户 请 求 , 把 请 求 传送 给 Servlet 并 把 结果 返回 给 客 
户 端 ,主要 有 两 大 功能 : 一 是 提供 编写 Servlet 程序 所 需要 的 API; 另外 就 是 提供 驻 留 并 
执行 Servlet 程序 的 环境 。 
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8.5 Serviet 的 生命 周期 





Servlet 的 生命 周期 定义 了 一 个 Servlet 如 何 被 加 载 、 初 始 化 ,以 及 它 怎 样 接收 请 求 、 
响应 请 求 ,提供 服务 的 全 过 程 。 在 编写 代码 时 , Servlet 生命 周期 由 接口 javax. servlet. 
Servlet 定义 。 所 有 的 Java Servlet 必须 直接 或 间接 地 实现 javax. servlet. Servlet 接口 ,这 
样 才能 在 Servlet 引擎 上 运行 。Servlet 引擎 提供 网 络 服务 ,响应 MIME 请 求 ,运行 
Servlet 容器 。javax. servlet. Servlet 接口 定义 了 一 些 方 法 ,在 Servlet 的 生命 周期 中 ,这 些 
方法 会 在 特定 时 间 按 照 一 定 的 顺序 被 调用 ,如 图 8-7 所 示 。 





不 存在 Servlet 实 例 








结束 Servlet 对 应 


| Servlet 生 命 周 期 A Servlet 的 destroy 方 法 


容器 装载 Servlet 























初始 化 Servlet 调用 service 方 法 
创建 Servlet 实 例 对 应 Servlet 的 init 方 法 上 = | 对 应 Servlet 的 service 方 法 





























图 8-7 Servlet 的 生命 周期 


下 面 详细 地 对 Servlet 进行 讲解 。 

1. Servlet 加 载 (Load) 和 实例 化 (Instantiated) 

Servlet 引擎 负责 实例 化 和 加 载 Servlet, 这 个 过 程 可 以 在 Servlet 引擎 加 载 时 执行 ,也 
可 以 在 Servlet 响应 请 求 时 执行 ,还 可 以 在 两 者 之 间 的 任何 时 候 执行 。 

2. Servlet 初始 化 (Initialized) 

Servlet 引擎 加 载 好 Servlet 后 ,必须 要 初始 化 它 。 初 始 化 Servlet 一 般 可 以 从 数据 库 
里 读 取 初 始 数据 ,建立 JDBC Connection ,或 者 建立 对 其 他 有 价值 的 资源 的 引用 o 

在 初始 化 阶段 ,Init( ) 方 法 被 调用 。 这 个 方法 在 javax. servlet. Servlet 接口 中 定义 。 
Init( ) 方 法 以 一 个 Servlet 配置 文件 (ServletConfig ) 为 参数 。Servlet configuration 对 象 
由 Servlet 引擎 实现 ,可 以 让 Servlet 从 中 读 取 一 些 name-value 对 的 参数 值 。Servlet 
Config 对 象 还 可 以 让 Servlet 接受 一 个 Servlet Context 对 象 。 

3. Servlet 处 理 请 求 

Servlet 被 初始 化 以 后 ,就 处 于 能 响应 请 求 的 就 绪 状 态 。 每 个 对 Servlet 的 请 求 由 一 
个 Servlet Request 对 象 代表 。Servlet 给 客户 端的 响应 由 一 个 Servlet Response 对 象 代 
表 。 当 客户 端 有 一 个 请 求 时 ,Servlet 引擎 将 ServletRequest 和 ServletResponse 对 象 都 
转发 给 Servlet, 这 两 个 对 象 以 参数 的 形式 传 给 Service 方法 。 这 个 方法 由 javax. servlet. 
Servlet 定义 并 由 具体 的 Servlet 实现 。 
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4. Servlet 释放 


Servlet 引擎 没有 必要 在 Servlet 生命 周期 的 每 一 段 时 间 内 都 保持 Servlet 的 状态 。 
Servlet 引擎 可 以 随时 随地 地 使 用 或 释放 Servlet。 因 此 ,不 能 依赖 Servlet class 或 其 成 员 
存储 信息 。 当 Servlet 引擎 判断 一 个 Servlet 应 当 被 释放 时 (比如 说 Engine 准备 Shut 
down 或 需要 回收 资源 ) ,Engin 必须 让 Servlet 能 释放 其 正在 使 用 的 任何 资源 ,并 保存 持 
续 性 的 状态 信息 。 这 些 可 以 通过 调用 Servlet 的 destroy 方法 实现 。 

注意 : 在 Servlet Engine 释放 一 个 Servlet 以 前 ,必须 让 其 完成 当前 实例 的 service 方 
法 或 是 等 到 timeout( 如 果 Engine 定义 了 timeout)。 当 Engine 释放 一 个 Servlet 以 后 ， 
Engine 将 不 能 再 将 请 求 转发 给 它 ,Engine 必须 彻底 释放 该 Servlet 并 将 其 标明 为 可 回 
收 的 。 


8.6 Servlet 体系 的 常用 类 和 接口 





1. Servlet 实现 相关 接口 

(1) public interface Servlet ,这 个 接口 是 所 有 Servlet 必须 直接 或 间接 实现 的 接口 。 
它 定 义 了 以 下 方法 : 

* init(ServletConfig config ) 方 法 一 一 用 于 初始 化 Servlet. 
destory() 方 法 一 一 销毁 Servlet, 
getServletInfo() 方 法 一 一 获得 Servlet 的 信息 。 
getServletConfig() 方 法 一 一 获得 Servlet 配置 相关 信息 。 
service(ServletRequest req. ServletResponse res) 方 法 一 一 应 用 程序 运行 的 逻辑 
入 口 点 。 

(2) public abstract class GenericServlet 提供 了 对 Servlet 接口 的 基本 实现 。 它 是 一 
个 抽象 类 。 它 的 service() 方 法 是 一 个 抽象 的 方法 ,GenericServlet 的 派生 类 必须 直接 或 
间接 实现 这 个 方法 。 

(3) public abstract class HttpServlet 类 是 针对 使 用 HTTP 协议 的 Web 服务 器 的 
Servlet 类 。 

HttpServlet 类 实现 了 抽象 类 GenericServlet 的 service ) 方 法 ,在 这 个 方法 中 ,其 功 
能 是 根据 请 求 类 型 调用 合适 的 do 方法 。do 方法 的 具体 实现 是 由 用 户 定 义 的 Servlet 根 
据 特定 的 请 求 /响应 情况 作 具 体 实 现 。 也 就 是 说 ,必须 实现 以 下 方法 中 的 一 个 。 

* doGet: 如 果 Servlet 支持 HTTP GET 请 求 .用 于 HTTP GET 请 求 。 

。 doPost: 如 果 Servlet 支持 HTTP POST 请 求 . 用 于 HTTP POST 请 求 。 

。 其 他 do 方法 : 用 于 HTTP 其 他 方式 请 求 。 

2. 请 求 、 响 应 及 其 他 接口 


(1) public interface HttpServletRequest 接口 中 最 常用 的 方法 就 是 获得 请 求 中 的 参 
数 , 实 际 上 ,内 置 对 象 request 就 是 实现 该 接口 类 的 一 个 实例 。 
(2) public interface HttpServletResponse 接口 代表 了 对 客户 端的 HTTP 响应 ,实际 
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上 ,内 置 对 象 response 就 是 实现 该 接口 类 的 一 个 实例 。 

(3) 其 他 接口 。 会 话 跟踪 接口 (HttpSeesion) , Servlet 上 下 文 接口 (ServletContext) , 
等 与 HttpServletRequest 接口 类 似 , 不 再 重复 介绍 。 但 有 一 点 需要 读者 注意 ,JSP 与 
Servlet 中 内 置 对 象 相似 ,但 二 者 获取 内 置 对 象 的 方法 略 有 不 同 , 表 8-2 就 是 这 两 种 技术 
的 简单 比较 。 


表 8-2 JSP 与 Servlet 的 简单 比较 











请 求 对 象 响应 对 象 会 话 跟踪 上 下 文 内 容 对 象 
JSP request, 容器 产 | response, # 器 | session, 容 器 产生 ,直接 | application, 75 38 J^ Æ, 
生 , 直 接 使 用 产生 ,直接 使 用 | 使 用 直接 使 用 
1 request, 容器 产 | response, 容器 | HttpSeesion session = | 用 getServletContext() 
Sovet | 生 , 直 接 使 用 。 | 产生 ,直接 使 用 | request. getSeesion() | 方法 获取 














3. RequestDispatcher 接口 

RequestDispatcher 接口 代表 Servlet 协作 , 它 可 以 把 一 个 请 求 转发 到 另 一 个 Servlet 
或 JSP。 该 接口 主要 有 两 个 方法 。 

(1) forward(ServletRequest.ServletResponse response): 把 请 求 转发 到 服务 器 上 的 
另 一 个 资源 。 

(2) include(ServletRequest,ServletResponse response): 把 服务 器 上 的 另 一 个 资源 
包含 到 响应 中 。 

RequestDispatcher 接口 的 forward 处 理 请 求 转发 ,在 Servlet 中 是 一 个 很 有 用 的 功 
能 ,由 于 该 种 请 求 转发 属于 request 范围 ,所 以 应 用 程序 往往 用 这 种 方法 实现 由 Servlet 向 
JSP 页 面 或 另 一 Servlet 传输 程序 数据 。 其 核心 代码 如 下 : 


request.setAttribute ("key", 任意 对 象 数 据 ) ; 

RequestDispatcher dispatcher=null; 

dispatcher= getServletContext (). getRequestDispatcher ("目的 地 JSP 页面 或 另 一 
servlet"); 


dispatcher.forward (request, response); 


在 以 上 代码 中 ,RequestDispatcher 的 实例 化 由 上 下 文 的 getRequestDispatcher 方法 
实现 ,在 目的 地 JSP 页 面 或 另 一 Servlet 中 ,用 户 程序 可 以 用 request. setAttribute 
("key") 来 获取 传递 的 数据 。 另 外 ,需要 注意 的 是 ,利用 RequestDispatcher 接口 的 
forward 处 理 请 求 转 发 ,其 作用 类 似 于 JSP 中 的 二 jsp: forward 二 动作 标记 ,属于 服务 器 
内 部 跳 转 ,实际 上 .JSP 中 的 二 jsp: forward 二 动作 标记 的 底层 实现 就 是 利用 
RequestDispatcher 技术 。 

4. 过 滤 

过 滤 包 括 Filter, FilterChain, FilterConfig 等 接口 ,这些 在 Web 应 用 中 是 很 有 用 的 技 
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术 。 例 如 ,通过 过 滤 可 以 完成 统一 编码 (中 文 处 理 技术 ) 、 认 证 等 工作 。 

5. 简单 的 Servlet 编程 

创建 并 运行 一 个 HTTP Servlet, 通 常 涉及 以 下 几 个 步骤 : 

OD. 导入 编写 Servlet 需要 的 基本 包 , 扩 展 HttpServlet 抽象 类 。 

(2) 重 载 适 当 的 方法 。 根 据 实 际 情况 重 写 继 承 自 HTTPservlet 的 doGet() 或 
doPost() 等 方法 。 

(3) 如 果 有 HTTP 请 求 , 获 取 该 请 求 。 用 HttpServletRequest 对 象 来 检索 HTML 
表单 所 提交 的 数据 或 URL 上 的 查询 字符 串 。HttpServletRequest 对 象 含有 特定 的 方法 
以 得 到 客户 端 提供 的 信息 ， 如 getParameterNames ( )、getParameter ( ), 
getParameterValues() 等 方法 。 

(4) 生成 HTTP 响应 。 用 println() 方 法 将 HTML 脚本 打印 输出 , 即 动态 生成 页 面 ， 
由 HttpServletResponse 对 象 生成 响应 ,并 将 它 返回 到 发 出 请 求 的 客户 机 上 。 它 的 方法 
允许 设置 “请 求 ”标题 和 * 响 应 ”主体 .“ 响 应 "对象 还 含有 getWriter() 方 法 以 返回 一 个 
PrintWriter 对 象 。 使 用 PrintWriter 的 print O 和 println() 方 法 以 编写 Servlet 响应 来 返 
回 给 客户 机 。 或 者 ,直接 使 用 out 对 象 输出 有 关 HTML 文档 内 容 。 

(5) 使 用 部 署 文件 web. xml 配置 Servlet. 作为 客户 请 求 的 一 部 分 ,用 户 请 求 URL 
必须 映射 到 一 个 特定 的 Servlet。 在 每 一 个 Web 应 用 程序 路 径 的 WEB-INF 下 存在 一 个 
web. xml 配置 文件 ,用 来 设 定 Web 应 用 程序 的 配置 。 开 发 者 将 一 个 Servlet 类 通过 
web. xml 进行 配置 后 即 可 映射 到 一 个 URL, 此 后 可 通过 使 用 这 个 URL 来 访问 该 
Servlet. 

Bi 8-4 一 个 简单 的 Servlet 程序 的 编写 .部署 和 调用 。 

Servlet 可 以 方便 地 与 Web 页 面 进行 交互 ,首先 创建 一 个 HTML 页 面 TestServlet 
. html, 其 源 代码 如 下 : 


<html> 

<head> 

<title>Test HTML< /title> 

</head> 

<body> 

< form action="/myjsp/servlet/TestServlet"> 
请 输入 姓名 : 

< Input type="text" name= "myname"><br> 
您 的 兴趣 : 

<select name- "love"» 

<option value= "Sleep"> Sleep< /option> 
<option value= "Dance"> Dance< /option> 
<option value= "Travel"» Travel« /option> 
</select> <br> 

«Input type="submit” name= "mysubmit"» «br» 
« Input type- "reset" value- "重新 来 过 "><br> 
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</form> 
< /body> 
< /html> 


该 页 面 的 显示 效果 如 图 8-8 所 示 。 


F Test HTML - Microsoft Internet Explorer 

















图 8-8 使 用 Servlet 和 Web 页 面 交互 


接 下 来 编写 和 HTML 页 面 交 互 的 Servlet, 文 件 名 为 TestServlet. java. 其 源 代码 


如 下 : 


据 数 


import java.io. * ; 

import javax.servlet.* ; 

import javax.servlet.http. * ; 

public class TestServlet extends HttpServlet 

{ 

// 重 写 doPost 方法 

public void  doPost ( HttpServletRequest req,  HttpServletResponse res) throws 
ServletException, IOException 

{res.setContentType ("text/html;charset=gb2312"); // 首 先 设置 头 信息 
PrintWriter out-res.getWriter(); // 用 writer 方 法 返回 响应 数据 
out .print1n ("<html> « head» < /head> <body>") ; 

out.println ("name:"+ req.getParameter ("myname") + "<br> "); 

out .println ("love:"+ req.getParameter ("love")+ "<br> "); 

out .Println("< /body> < /html> "); 

out.close(); 

) 

// 重 写 doGet 方法 

public void doGet ( HttpServletRequest req,  HttpServletResponse res) throws 
ServletException, IOException{ 

doPost (req, res) ; 

) 

} 


从 上 面 代码 可 以 知道 ,如 果 某 个 类 要 成 为 Servlet, 则 它 应 该 从 HttpServlet 继承 , 根 
据 是 通过 GET 还 是 POST 发 送 ,确定 覆盖 doGet, doPost 方法 之 一 或 全 部 。doGet 


和 doPost 方法 都 有 两 个 参数 .分 别 为 HttpServletRequest 类 型 和 HttpServletResponse 


第 8 章 ”服务 器 功能 扩展 技术 





JavaBean 与 Servlet 


类 型 。 

HttpServletRequest 提供 访问 有 关 请 求 信 息 的 方法 ,例如 表单 数据 .HTTP 请 求 头 等 
等 。HttpServletResponse 除了 提供 用 于 指定 HTTP MAARA (200,404. $), JE AK 
(Content-Type、Set-Cookie 等 ) 的 方法 之 外 ,最 重要 的 是 它 提供 了 一 个 用 于 向 客户 端 发 送 
数据 的 PrintWriter。 对 于 简单 的 Servlet 来 说 , 它 的 大 部 分 工作 是 通过 println 语句 生成 
向 客户 端 发 送 的 页 面 。 

要 想 编 译 Servlet 并 使 其 运行 ,还 需要 修改 Web. xml 中 的 内 容 , 在 Web. xml 中 添加 
以 下 内 容 : 


<Web- app> 

<servlet> 

< servlet- name> TestServlet« /servlet- name> 

< servlet- class? servlet/TestServlet« /servlet- class? 
</servlet> 

<servlet-mapping> 

< servlet- name> TestServlet< /servlet- name> 
<url-pattern> /myjsp/servlet/TestServlet < /url- pattern> 
</servlet- mapping> 

< /Web- app> 


BORE Servlet 就 可 以 运行 了 ,在 图 8-8 所 示 的 页 面 中 输入 信息 后 , 单 击 “ 提 交 查 询 内 
容 ” 按 钮 ,请 求 被 发 送 给 Servlet。 页 面 显示 效果 如 图 8-9 rz. 


D http://locolhost:8080/myjsp/serviet/Testserviet?myname -JAEHITT= E7 


HEO [6] =-%occ%E1%BD%86%82%E9%Dls%eAF9%eC4%DA%eC6%DD | oa 





name: 张 飞 
love: Sleep 





图 8-9 处 理 Web 页 面 请 求 的 Servlet 页 面 


在 web. xml 文件 中 ,标记 近 servlet 盖 要 先 于 标记 所 servletrmapping 过 定义。 在 标记 
< 一 servlet 二 中 ,属性 servlet-class 定义 Servlet 程序 实际 的 包 名 和 类 名 ,属性 servlet-name 
定义 代表 为 该 Servlet 命名 一 个 名 字 , 可 以 是 任意 的 标识 符 ; 标 记 二 servlet-mapping 二 中 
定义 对 用 户 所 命名 的 Servlet( 属 性 servlet-name 设置 的 ) 的 URL 调用 模式 (属性 url- 
pattern 定义 ), 如 上 例 的 程序 . 它 的 URL 调用 模式 是 : http: //localhost: 8080/myjsp/ 
servlet/TestServlet 。 

在 现实 编程 过 程 中 .很 多 读者 会 混淆 Servlet 程序 与 Applet 程序 ,实际 上 ,Servlet 程 
序 与 Applet 程序 相似 ,只 不 过 Applet 程序 在 客户 端的 浏览 器 中 运行 ,必须 继承 Applet 
类 ;而 Servlet 程序 在 服务 器 端 运 行 , 它 必须 实现 javax. servlet. Servlet 接口 。 
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大 多 数 Servlet 程序 都 是 处 理 HTTP 响应 的 ,为 了 简化 Servlet 程序 的 编写 ， 
Servlet API 提供 了 支持 HTTP 协议 的 javax. servlet. http. HttpServlet 类 ,也 就 是 说 ， 
HttpServlet 对 象 适合 运行 在 与 客户 端 采 用 HTTP 协议 通信 的 Servlet 容器 或 者 Web 
服务 器 中 。 在 开发 Web 应 用 程序 时 ,用 户 编写 的 Servlet 程序 继承 HttpServlet 类 
即 可 。 


8.7 Servlet 会 话 





会 话 状 态 的 维持 是 开发 Web 应 用 所 必须 面 对 的 问题 ,有 多 种 方法 可 以 来 解决 这 个 问 
题 ,如 使 用 Cookies、 隐 藏 表单 域 或 直接 把 状态 信息 加 到 URL 中 等 。Servlet 本 身 也 提供 
了 一 个 Httpsession 接口 来 支持 会 话 状态 的 维持 ,在 这 里 主要 介绍 基于 这 个 接口 的 会 话 
状态 的 管理 。 

Servlet 中 使 用 Session 对 象 的 流程 为 : 得 到 Session 对 象 (调用 HttpServletRequest 
. getsessionO 方法 得 到 该 对 象 ) ,操作 并 查看 Session 对 象 ,在 会 话 中 保存 数据 ,最 后 关闭 
该 Session 对 象 。 在 Servlet 中 使 用 Session 的 具体 过 程 如 下 : 

(1) 使 用 HttpServletRequest 的 getsession 方法 得 到 当前 存在 的 Session ,如 果 当 前 
没有 定义 Session, 则 创建 一 个 新 的 Session ,也 可 以 使 用 方法 getsession(true) 。 

(2) 写 Session 变量 。 可 以 使 用 方法 Httpsession. setAttribute (name, value) 来 向 
Session 中 存储 一 个 信息 。 也 可 以 使 用 Httpsession. putValue(name,value) ,但 这 个 方法 
已 经 过 时 了 。 

(3) 读 Session 变量 。 可 以 使 用 方法 Httpsession. getAttribute (name) 来 读 取 
Session 中 的 一 个 变量 值 ,如 果 name 是 一 个 没有 定义 的 变量 ,那么 返回 的 是 null。 需 要 注 
意 的 是 ,从 getAttribute 读 出 的 变量 类 型 是 Object ,必须 使 用 强制 类 型 转换 。 

例如 : 


String uid= (String) session.getAttribute ("uid"); 


(4) 关闭 Session. 当 使 用 完 Session 后 ,可 以 使 用 session. invalidate O 7j KA 
Session。 但 是 这 并 不 是 严格 要 求 的 。 因 为 Servlet 引擎 在 一 段 时 间 之 后 会 自动 关闭 
Seesion。 例 如 : 


HttpSession session= request.getSession (true); // 参 数 true 是 在 没有 Session 时 创建 一 
个 新 的 对 象 
Date created- new Date (session. getCreationTime ()); // 得 到 Session 对象 创 建 的 
时 间 


out.println("ID "+session.getId()+"<br>"); // 得 到 该 Session 的 id, 并 打印 
out.println("Created: "+created+"<br>"); // 打 印 Session 创建 时 间 
session.setAttribute ("UID", "12345678") ; // 在 Session 中 添加 变量 UID= 12345678 
session.setAttribute ("Name", "Tom") ; // 在 Session 中 添加 变量 Name- Tom. 


例 8-5 使 用 html 5j Servlet 相 结 合 完成 用 户 注册 、 用 户 登录 、 用 户 密码 重 置 等 功能 。 
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程序 分 析 : 在 编写 程序 的 过 程 中 读者 需要 了 解 Session 等 对 象 的 使 用 ;需要 注意 用 户 
注册 和 登录 时 会 话 的 作用 ,可 以 设计 如 图 8-10 所 示 的 关系 图 。 















































密码 重 置 
Session 传 值 reeds 
Servlet 
LoginServlet 
用 户 登 录 
Posti ffi 返回 首页 
处 理 
Wem aman [ esu 返回 首页 
Servlet login.html 
ResetPasswordServlet 
用 户 注册 返回 首页 
EM | 服务 端 处 理 
用 户 注册 页 面 Post 传 值 用 户 注 册 的 
reguser.html Servlet Reg 
UserServlet 














8-10 页 面 与 Servlet 之 间 的 关系 


用 户 登 录 页 面 login. html 示意 图 如 图 8-11 所 示 。 


BY 型 
ae 


[& E) 注册 新 用 户 


图 8-11 登录 页 面 login. html 示意 





用 户 注 册页 面 reguser. html 示意 图 如 图 8-12 所 示 。 





LUCI seese 
性 别 : @ 男 ok 





问题 : “你 的 家 乡 在 哪里 ? 
BR: 湖南 
BD $: student@hnu. cn 


Ge) eA 返回 登录 页 面 


























8-12 ”用户 注 册页 面 reguser. html 示意 


用 户 登录 成 功 后 LoginServlet 显示 的 页 面 示 意图 如 图 8-13 所 示 。 
登录 用 户 名 、 密 码 错 误 ,LoginServlet 显示 的 页 面 示意 图 如 图 8-14 所 示 。 
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用 户 : admin 
密码 : 123456 
性 别 : 女 
密码 找 回 问题 : 11111 
密码 找 回答 案 : 22222 
邮箱 : 1123@sina. com 





返回 登录 页 面 EBEE 





图 8-13 用户 登 录 成 功 页 面 





HPZ. FHR! 
返回 登录 页 面 








图 8-14 错误 显示 页 面 


用 户 成 功 登 录 后 重 置 密码 ,ResetPasswordServlet 显示 的 页 面 示 意图 如 图 8-15 所 示 。 





admin 你 好 ! 我 们 将 重 置 你 的 密码 。 
返回 登录 页 面 








8-15 重 置 密码 页 面 


用 户 如 果 没 有 登录 成 功 而 去 直接 访问 密码 重 置 页 面 ,ResetPasswordServlet 显示 的 
页 面 示意 图 如 图 8-16 所 示 。 


您 没有 登录 ， 不 能 重 置 密码 ! 


返回 登录 页 面 








图 8-16 重 置 密码 错误 提示 页 面 


具体 实现 步骤 如 下 : 

步骤 1: 创建 数据 表 

在 MySQL 中 创建 数据 库 db_example 及 数据 表 tb_users, 表 结构 如 图 8-17 所 示 。 
步骤 2: HM JDBC 访问 架 包 .添加 DataVaseUtil 类 。 

在 编辑 工具 中 完成 上 述 工 作 后 ,项 目 包 结 构 如 图 8-18 所 示 。 

步骤 3: reguser. html 页 面 设计 。 

在 reguser. html Jt ifi ff] — header — /header— Jill A 4n F JavaScript 代码 ,进行 输入 
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Field Name [Datatype [len [Default PK? [Not Null2|Unsigned? [Auto Incr?|Zerofill?| 
w username (varchar [~|50 | [c2] u f L o E 
oes varchar [so | S a a | 0 y faai 
sex archar [jso Lt Li Ll [m] 
email warchar [>j50 Iur uw 0 [n] [m] 
[question [varchar  [-|]100 口 Li Li Li Li 
| answer varchar  [-]100 I m] QO 口 口 
四 kl L LI Li uu 
8-7. 数据 库 表 结构 
4 i servietusermanage 
4 (B src 
> B comstep.controller 
4 Bi comstep.util 
b B) DataBaseUtiljava. 
D BÀ JRE System Library [Sun JDK 1.6.0 13] 
> mh Java EE 6 Libraries 
4 BA Referenced Libraries 
> & mysql-connector-java-5.1.15-binjar - E:\too!: 
> @ WebRoot 
fg UMLumr 
818 项 目 结构 图 
数据 的 客户 端 验 证 。 


<script type- "text/javascript"» 
function reg (form) { 
if (form.username.value=="") { 
alert ("用 户 不 能 为 空 !"); 
return false; 





} 

if (form.password.value=="") { 
alert ("密码 不 能 为 空 !"); 
return false; 

} 

if (form. repassword.value=="") { 
alert ("确认 密码 不 能 为 空 !"); 
return false; 

} 

if (form.password.value !=form.repassword.value) { 
alert ("PUK 888358 A — $1"); 
return false; 

} 

if (form.question.value=="") { 
alert ("S55 $x [el Fo] SUIS fie Jg 1") ; 
return false; 

} 


if (£orm.answer-value=="") { 


alert ("密码 找 回 答案 不 能 为 空 !"); 
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return false; 

} 

if (form.email.value=="") { 
alert ("电子 邮箱 不 能 为 空 !"); 
return false; 


} 
</script> 


在 reguser. html 的 主体 内 容 如 下 ,请 特别 注意 form 中 的 写法 : 
< form action= "RegUserServlet" method="post" onsubmit- "return reg (this);"» 


<table align="center" border- "0" width="500"> 
«tr» 





<td align="center" colspan-"2" bgcolor=RGB(188,188,125)> 用 户 注册 < /td> 
</tr> 
<tr> 
<td align= "right"> 用 户 编号 :< /td> 
<td><input type="text" name- "usercode" /> </td></tr> 
<tr> 
<td align= "right"> 密 Bj :« /td> 
<td>< input type= "password" name= "password" class="box"></td></tr> 
<tr> 
<td align= "right"> 确 认 密 码 :< /td> 
<td><input type="password” name- "repassword" class= "box">< /td>< /tr> 
<tr> 
<td align= "right"> 性 别 :</td> 
<td><input type="radio" name- "sex" value=" " checked- "checked"> 男 
«input type="radio" name- "sex" value- " 女 "> 女 </td>< /tr> 
<tr> 
<td align= "right"> 密 码 找 回 问题 :< /td> 
<td><input type="text" name- "question" class- "box">< /td>< /tr> 
«tr» 
«td align- "right"> 密 码 找 回 答案 :< /td> 
<td><input type="text" name- "answer" class= "box">< /td>< /tr> 
<tr> 
«td align="right"> HB 箱 :< /td> 
<td><input type="text" name- "email" class= "box">< /td>< /tr> 
«tr» 
<td colspan- "2" align="center" height- "40"> 
«input type="submit" value- "iE 册 "> 
«input type- "reset" value=" 置 "> 
<a href- "login.html"» i& [2] SHR Jt il] < /a> 
</td></tr> 
</table> 
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</form> 


步骤 4: RegUserServlet 类 的 设计 
新 建 Servlet。RegUserServlet 用 于 相应 reguser. html 提交 的 请 求 , 其 核心 内 容 
如 下 : 


public void doPost (HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
// 设 置 request 与 response 的 编码 
response.setContentType ("text/html") ; 
request .setCharacterEncoding ("GBK") ; 
// 获 取 表单 中 属性 值 
String username= request .getParameter ("username"); 
String password= request .getParameter ("password") ; 
String sex= request .getParameter ("sex"); 
String question- request .getParameter ("question"); 
String answer- request.getParameter ("answer"); 
String email- request.getParameter ("email"); 
response.setContentType ("text/html"); 
response.setCharacterEncoding ("gbk") ; 
PrintWriter out= response.getWriter(); 
// 实 际 完成 程序 ,需要 你 自己 处 理 页 面 显示 
// 判 断 数 据 库 是 否 连 接 成 功 
Connection conn= DataBaseUtil.createConn(); 
if (conn !=null) { 
try { 
// 插 和 注册 信息 的 SOL 语句 (使 用 ? 占 位 符 ) 


“insert into tb_user (username, password, sex, question, answer, 





String sqlstr: 
email) "+"values(?,?,2?,2,2,2)"% 
// 准 备查 询 参 数 
Object sqlParam[]= {username, password, sex, question, answer, email}; 
// 输 出 注册 结果 信息 
if(DataBaseUtil.execUpdate (sqlstr, sqlParam, conn)) 
[out.println (username "注册 成 功 !");} 
else 
{out .println (username- "注册 失败 !");} 
} catch (Exception e) { 
e.printStackTrace (); 
out.println (e.getMessage ()) 7 
} 
} else { 
// 发 送 数据 库 连接 错误 提示 信息 
response.sendError (500, "数据 库 连 接 错 误 !1"); 
} 
out.flush(); 
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out.close(); 


H 


25 5: login. html 页 面 和 LoginServlet 类 的 设计 

login. html 页 面 与 上 一 个 演练 几乎 完全 一 样 , 只 是 添加 了 一 个 跳 转 到 reguser. html 
的 超 链 接 。LoginServlet 类 的 设计 与 上 一 演练 有 区 别 , 它 需要 连接 到 数据 库 去 验证 用 户 
名 密码 是 否 正 确 , 如 果 能 成 功 登 录 , 还 需要 写 Session。 以 下 为 LoginServlet 类 的 核心 
代码 。 


// 获 取 表 单 中 属性 值 
String username- request .getParameter ("username"); 
String password- request .getParameter ("password"); 
// 创 建 连接 
Connection conn= DataBaseUtil.createConn () 7 
// 插 入 注册 信息 的 SOL 语句 (使 用 ? 占 位 符 ) 
String sqlstr="select sex, email, question, answer from tb user where username=? 
and password- ?"; 
// 准 备查 询 参 数 
Object sqlParam[]= {username, password}; 
// 执 行 查询 
ResultSet rs=DataBaseUtil.execQuery(sqlstr, sqlParam, conn); 
try í 
if (rs.next ()) 
{ 
// 获 取 Session 对 象 , 把 username ff A Session 中 
HttpSession session= request .getsession (); 
session.setAttribute ("username", username) ; 
// 以 下 省 略 从 数据 库 中 读 取 用 户 信 息 ,并 显示 在 页 面 上 
out.println("«a href- 'login.html'» 3B [2] SRW </a>"); 
out.println("«a href= 'ResetPasswordServlet'» 8 83 Hi </a>"); 
} 
else 
{ 
// 以 下 省 略 显示 提示 信息 
out.println("«a href= 'login.html'> 返 回 登 录 页 面 </a> ") ; 
rs.close(); 
} catch (SQLException e) { 
// 以 下 省 略 发 生 数 据 库 访问 错误 时 的 提示 信息 
out.println("«a href- "login.html'> 返 回 登 录 页 面 < /a> "); 
} 


步骤 6: ResetPasswordServlet 类 的 设计 
这 个 Servlet 类 需要 处 理 的 是 其 doGet 方法 。 其 核心 代码 如 下 : 
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// 以 下 读 取 Session 判断 是 否 已 经 登录 
Httpsession session- request .getsession(); 
String username- (String) session.getAttribute ("username") ; 
if ((username--null) | |username.equals ("")) 
1 
// 未 从 Session 中 获取 用 户 名 ,表示 用 户 未 登录 


// 从 Session 中 获取 了 正确 的 用 户 名 , 则 需要 重 置 该 用 户 的 密码 


8.8 案例 实践 


8.8.1 案例 需求 说 明 


采用 JSP 十 Servlet 十 JavaBean 实现 一 个 简单 的 购物 车 模型 ,首先 预 置 几 种 商品 , 单 击 
“购买 ” 选 购 相 应 的 货物 ,如 图 8-19 所 示 。 








coco W 只 httpy/localhost8080/cart/showjsp 
提供 商品 如 下 
| BART 上 
XR 2.8 BE 
ER 3.1 购买 
& 2.5 购买 
橘子 2.3 购买 
查看 购物 车 




















8-19 提供 商品 页 面 


单 击 “ 侠 果 ” 后 面 的 购买 链接 后 ,查看 购物 车 就 会 发 现 “ 苹 果 ” 已 经 出 现在 购物 车 中 ,如 
果 要 增加 购买 的 数量 , 则 可 以 多 单 击 几 次 “购买 ”链接 ,每 多 单 击 一 次 数量 就 会 加 1, 购 物 
车 效果 图 如 图 8-20 所 示 。 

在 购物 车 页 面 可 以 选择 继续 购物 ,也 可 以 选择 移 除 某 一 条 目 或 清空 整个 购物 车 。 
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© co WE PO http//localhost8080/cart/shopcar jsp 





购买 的 商品 如 下 


应 付 金额 ，2. 8 


继续 购物 清空 购物 车 

















8-20 ”购物 车 页 面 


8.8.2 技能 训练 要 点 


本 案例 主要 训练 JSP、JavaBean、Servlet 的 结合 使 用 ,JSP 十 JavaBean 十 Servlet 模式 
适合 开发 复杂 的 Web 应 用 。 在 这 种 模式 下 ,JSP 负责 数据 显示 ,JavaBean 负责 封装 数据 ， 
Servlet 负责 处 理 用 户 请 求 , 使 程序 各 个 模块 之 间 层 次 清晰 。 


8.8.3 案例 实现 


实现 思路 : show. jsp 页 面 中 将 表单 提交 给 Servlet. Servlet 接收 、 处 理 表单 数据 并 将 
数据 存放 在 Session 对 象 中 ,并 将 页 面 跳 转 至 shopcar. jsp, 在 shopcar. jsp 页 面 中 读 取 
Session 数据 ,形成 列表 并 显示 ,具体 实现 代码 如 下 。 

1l. 创建 封装 商品 信息 的 值 JavaBean 一 一 GoodsSingle 


Package com. valuebean; 
public class GoodsSingle { 


Private String name; // 保 存 商 品名 称 
Private float price; // 保 存 商品 价格 
private int num; // 保 存 商 品 购买 数量 


Public String getName () { 
return name; 

} 

public void setName (String name) { 
this.name- name; 

} 

public int getNum() { 
return num; 

} 

public void setNum (int num) { 
this .num= num; 


} 
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public float getPrice() { 
return price; 

$ 

public void setPrice (float price) { 


this.price=price; 


} 


2. 创建 工具 JavaBean 一 一 MyTools 实现 字符 型 数据 转换 为 整 型 及 乱码 处 理 


Package com. toolbean; 
import java.io.UnsupportedEncodingException; 
public class MyTools { 


public static int strToint (String str) { // 将 String 型 数据 转换 为 int 型 数据 的 
方法 
if(str--null||str.equals("")) 
str-"0"; 
int i-0; 
try{ 
i= Integer.parseInt (str); // 把 str 转换 成 int 类 型 的 变量 


}catch (NumberFormatException e) { 
//try- catch 就 是 监视 try 中 的 语句 ,如 果 抛 出 catch 中 声明 的 异常 类 型 
i-0; 
e.printStackTrace (); / AB Exception 的 详细 信息 打印 出 来 
} 
return i; 
} 
public static String toChinese (String str){  // 进 行 转 码 操作 的 方法 


if (str==null) 





try { 
str-new String (str.getBytes ("ISO- 8859- 1") ,"GB2312") ; 
) catch (UnsupportedEncodingException e) { 
str-""; 
e.printStackTrace () ; 
} 
return str; 


} 


3. 创建 购物 车 JavaBean— ShopCar 实现 添加 、 删 除 等 购物 车 功能 


package com.toolbean; 
import java.util.Arraylist; 
import com. valuebean.GoodsSingle; 
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public class ShopCar { 
private ArrayList buylist- new ArrayList (); // 用 来 存储 购买 的 商品 
public void setBuylist (ArrayList buylist) { 
this.buylist=buylist; 
} 
pe 
* @ 功 能 向 购物 车 中 添加 商品 
* @ 参 数 single 为 Goodssingle 类 对 象 ,封装 了 要 添加 的 商品 信息 
*4 
public void addItem(GoodsSingle single) { 
if(single!-null)( 
if (buylist.size()==0) { // 如 果 buylist 中 不 存在 任何 商品 
GoodsSingle temp- new GoodsSingle () ; 
temp.setName (single.getName () ) ; 
temp.setPrice (single.getPrice()); 
temp.setNum(single.getNum()); 


buylist.add (temp) ; // 存 储 商品 

} 

else{ // 如 果 buylist 中 存在 商品 
int i=0; 


for (;i<buylist.size()#i++){ 
IDAJ buylist 集合 对 象 ,判断 该 集合 中 是 否 已 经 存在 当前 要 添加 的 商品 
GoodsSingle temp= (GoodsSingle) buylist.get (i); 
// 获 取 buylist 集合 中 当前 元 素 
if (temp.getName () .equals (single.getName ())) { 
// 判 断 从 buylist 集合 中 获取 的 当前 商品 的 名 称 是 否 与 要 添加 的 商品 的 名 称 相同 
// 如 果 相 同 ,说明 已 经 购买 了 该 商品 ,只 需要 将 商品 的 购买 数量 加 1 
temp.setNum (temp.getNum()+1);// 将 商品 购买 数量 加 1 
break; // 结 束 for 循环 


} 
if (i>=buylist.size()) { // 说 明 buylist 中 不 存在 要 添加 的 商品 
GoodsSingle temp- new GoodsSingle() ; 
temp.setName (single.getName ()) ; 
temp.setPrice (single.getPrice()); 
temp.setNum (single.getNum()) ; 
buylist.add(temp); // 存 储 商 品 


pee 


* @ 功 能 从 购物 车 中 移 除 指定 名 称 的 商品 
* 8 参数 name 表示 商品 名 称 
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*/ 
public void removeItem (String name) { 
for(int i=0;i<buylist.size();i++){ // 遍 历 buylist 集合 ,查找 指定 名 称 的 商品 
GoodsSingle temp- (GoodsSingle)buylist.get(i); // 获 取 集 合 中 当前 位 置 的 商品 
if (temp. getName () .equals (name)) { // 如 果 商 品 的 名 称 为 name 参数 指定 的 
名 称 
if (temp.getNum()>1) { // 如 果 商 品 的 购买 数量 大 于 1 
temp.setNum(temp.getNum()-1); // 则 将 购买 数量 减 1 
break; // 结 束 for 循环 


else if (temp.getNum()==1) { // 如 果 商 品 的 购买 数量 为 1 
buylist.remove (i); // 从 buylist 集合 对 象 中 移 除 该 商品 


) 
4. 创建 实例 首页 面 index. jsp, 初 始 化 商品 信息 


<%@page contentType- "text/html; charset=GB2312"% > 
< jsp: forward page= "/index"/> 


5. 创建 处 理 用 户 访问 首页 面 请 求 的 Servlet —— IndexServlet 


Package com. servlet; 
import java.io.IOException; 
import java.util.ArrayList; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.servlet.http.Httpsession; 
import com. valuebean.GoodsSingle; 
public class IndexServlet extends HttpServlet ( 
private static ArrayList goodslist=new ArrayList(); 
protected void doGet (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 
doPost (request, response) ; 
} 
protected void doPost (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 
Httpsession session= request.getsession (); 
session.setAttribute ("goodslist",goodslist); 
response.sendRedirect ("show.jsp") 7 
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} 

static{ LASTS ER 
String[] names- ("3E ", "FH", "AEn, nl T n); 
float[] prices- (2.8£,3.1£,2.5£,2.3£); 





for(int i: 
GoodsSingle single- new GoodsSingle () + 
single.setName (names [i]) ; 
single.setPrice (prices [i]); 
single.setNum(1) 7 
goodslist.add (single) 


} 
6. show. jsp 显示 商品 信息 


<% 86 page contentType= "text/html; charset=GB2312"% > 
<%@page import-"java.util.ArrayList" 各 > 
<%@page import- "com.valuebean.GoodsSingle" %> 
<% ArrayList goodslist= (ArrayList) session.getAttribute("goodslist"); %> 
<table border- "1" width= "450" rules- "none" cellspacing- "0" cellpadding- "0"> 
«tr height- "50"»« td colspan- "3" align- "center"> 提 供 商品 如 下 < /td> < /tr> 
<tr align="center” height="30" bgcolor- "lightgrey"» 
<td> 名 称 < /td> 
«ta» ffi (元 / 斤 )< /ta> 
<td> 购 买 < /td> 
</tr> 
<% if(goodslist==null|lgoodslist.size()==0){ %> 
«tr height="100">< td colspan- "3" align- "center"> 没 有 商品 可 显示 !< /td>< /tr> 
<% 
ł 
else{ 
for (int i=0;i<goodslist.size();i++){ 
GoodsSingle single= (GoodsSingle)goodslist.get (i); 
%> 
<tr height="50" align="center"> 
<td><%=single.getName ()%>< /td> 
<td><%=single.getPrice()%></td> 
<td><a href="doCar? action=buy&id=< %=i8> "> ]3E« /a» « /td> 
</tr> 
<% 


$» 
<tr height- "50"» 





第 8 章 ”服务 器 功能 扩展 技术 


JavaBean 与 Servlet 


<td align="center” colspan= "3"><a href="shopcar.jsp"> 查 看 购物 车 < /a> 
</td> 

</tr> 

</table> 


7. 创建 处 理 用 户 购 买 . 移 除 ,清空 购物 车 请 求 的 Servlet Servlet ——BuyServlet 


package com.servlet; 
import java.io. IOException; 
import java.util.ArrayList; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import javax.servlet.http.Httpsession; 
import com. toolbean.MyTools; 
import com.toolbean.ShopCar; 
import com.valuebean.GoodsSingle; 
public class BuyServlet extends HttpServlet { 

protected void doGet (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 

doPost (request, response) ; 

} 

protected void doPost (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 


String action= request.getParameter ("action"); // 获 取 action 参数 值 
if(action-- null) 
action-""; 
if (action.equals ("buy") ) // 触 发 了 "购买 "请求 
buy (request, response) ; // 调 用 buy() 方 法 实现 商品 的 购买 
if (action.equals ("remove")) // 和 触发 了 " 移 除 "请 求 
remove (request, response) ; // 调 用 remove () 方 法 实现 商品 的 移 除 
if (action.equals("clear")) // 触 发 了 "清空 购物 车 "请求 
clear (request, response) ; // 调 用 clear() 方 法 实现 购物 车 的 清空 
} 
// 实 现 购买 商品 的 方法 


protected void buy (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 

Httpsession session= request .getsession(); 

String strId- request .getParameter ("id"); 

// 获 取 和 触发 "购买 "请求 时 传递 的 ia 参数 ,该 参数 存储 的 是 商品 在 goodslist 

对 象 中 存储 的 位 置 

int id-MyTools.strToint (strId); 

ArrayList goodslist= (ArrayList)session.getAttribute ("goodslist"); 

GoodsSingle single- (GoodsSingle)goodslist.get (id); 
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ArrayList buylist= (ArrayList) session.getAttribute ("buylist"); 
// 从 Session 范围 内 获取 存储 了 用 户 已 购买 商品 的 集合 对 象 
if (buylist==null) 
buylist=new ArrayList (); 
ShopCar myCar=new ShopCar () 7 
myCar.setBuylist (buylist); //#f buylist 对 象 赋值 给 shopcar 类 实例 中 的 属性 
myCar.addItem (single); // 调 用 ShopCar 类 中 addItem() 方 法 实现 商品 添加 操作 
session.setAttribute ("buylist",buylist); 
response.sendRedi rect ("show.jsp");// 将 请 求 重 定向 到 show. sp Wii 
} 
// 实 现 移 除 商品 的 方法 
protected void remove (HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
Httpsession session=request.getsession () 
ArrayList buylist= (ArrayList) session.getAttribute ("buylist"); 
String name= request .getParameter ("name") ; 
ShopCar myCar=new ShopCar(); 
myCar.setBuylist (buylist);// 将 buylist 对 象 赋值 给 ShopCar 类 实例 中 属性 
myCar.removeItem(MyTools.toChinese (name)) ; 
// 调 用 Shopcar 类 中 removeItem () 方 法 实现 商品 移 除 操作 
response.sendRedirect ("shopcar.jsp"); 
} 
// 实 现 清空 购物 车 的 方法 
protected void clear (HttpServletRequest request, HttpServletResponse 
response) throws ServletException, IOException { 
Httpsession sessio! 
ArrayList buylist- (ArrayList)session.getAttribute ("buylist"); 
// 从 Session 范围 内 获取 存储 了 用 户 已 购买 商品 的 集合 对 象 
buylist.clear(); // 清 空 buylist 集合 对 象 , 实 现 购物 车 清空 的 操作 
response.sendRedirect ("shopcar.jsp"); 





= request.getsession(); 


} 


8. 在 web. xml 文件 中 配置 Servlet 


<?xml version="1.0" encoding= "UTF- 8"?> 
<web- app> 
<!-- 配 置 IndexServlet --» 
<servlet> 
< servlet- name> indexServlet< /servlet- name> 
< servlet- class» com.yxq.servlet.IndexServlet« /servlet-class> 
</servlet> 
< servlet-mapping> 
X servlet- name> indexServlet< /servlet- name> 
<url-pattern> /index« /url- pattern» 
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< /servlet-mapping» 

<!-- 配 置 BuyServlet --> 

«servlet» 
< servlet- name» buyServlet« /servlet- name» 
« servlet- class» com. yxq.servlet.BuyServlet« /servlet- class» 

</servlet> 

<servlet-mapping> 
< servlet- name» buyServlet< /servlet- name» 
«url- pattern» /doCar« /url- pattern» 

< /servlet- mapping» 

< /web- app» 


9. 创建 页 面 shopcar.jsp 购物 车 


<%@page contentType= "text/html; charset=GB2312"% > 
<%@page import="java.util.ArrayList” $> 
<%@page import- "com. valuebean.GoodsSingle" %> 
<% 
// 获 取 存 储 在 Session 中 用 来 存储 用 户 已 购买 商品 的 buylist 集合 对 象 
ArrayList buylist= (ArrayList) session.getAttribute ("buylist") 
float total=0; // 用 来 存储 应 付 金额 
&> 
<table border="1" width- "450" rules- "none" cellspacing- "0" cellpadding- "0"» 
«tr height- "50"»« td colspan- "5" align- "center"> 购 买 的 商品 如 下 < /td>< /tr> 
<tr align="center” height="30" bgcolor- "lightgrey"> 
«td width= "25% "> 名 称 < /td> 
<td> 价 格 ( 元 / 斤 )< /ta> 
<td> 数 量 < /td> 
<td> 总 价 (元 )< /td> 
<td> 移 除 (-1/ 次 )< /to> 
</tr> 
<% if(buylist--null| |buylist.size()==0) { %> 
<tr height="100"><td colspan- "5" align= "center"> 您 的 购物 车 为 空 !< /td> </tr> 
<% 





i<buylist.size();i++){ 
GoodsSingle single= (GoodsSingle)buylist.get (i); 


String name= single.getName () ; // 获 取 商 品名 称 
float price=single.getPrice(); // 获 取 商 品 价格 
int num-single.getNum(); // 获 取 购 买 数量 


float money- ( (int) ( (price * num+ 0.05f) * 10)) /10£; 
// 计 算 当 前 商品 总 价 , 并 四 舍 五 人 
total+=money; // 计 算 应 付 金额 
s> 
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<tr align="center" height="50"> 
<td><%=name% ></td> 
<td><%=price% ></td> 
<td><%=numt >< /td> 
<td><%=money% ></td> 
<td><a href- "doCar? action= remove&name- « $% = single.getName () %>"> 移 除 </a></ 
td» 
</tr> 
<$% 


} 
$> 
<tr height="50" align- "center"><td colspan= "5"> 应 付 金 额 :<%$=total%$>< /td>< /tr> 
<tr height="50" align="center"> 
<td colspan="2"><a href= "show.jsp"> 继 续 购物 </a>< /td> 
<td colspan= "3"><a href- "doCar? action- clear"> 清 空 购物 车 < /a» « /td> 
</tr> 
</table> 


A 章 小 结 


本 章 主 要 介绍 了 Web 项 目 程序 开发 过 程 中 关于 动态 页 面 的 开发 的 扩展 技术 ,涉及 
JavaBean 和 Servlet ,主要 讲解 了 它们 的 主要 概念 、 组 成 元 素 、. 生 命 周期 .编写 方法 等 内 容 ， 
读者 通过 本 章 的 学 习 , 会 进一步 加 深 对 Web 项 目 程 序 开发 的 理解 ,在 熟练 使 用 JSP 的 基 
础 上 配合 使 用 JavaBean 和 Servlet ,开发 出 功能 更 为 强大 的 Web 项 目 程序 。 


本 章 习 题 


一 、 选 择 题 
1. 有 关 JavaBean 的 说 法 不 正确 的 是 ( js 

A. JavaBean 其 实 就 是 一 个 Java 类 

B. 应 用 JavaBean 可 以 将 表示 层 和 业务 逻辑 层 分 开 

C. 编写 JavaBean 和 编写 普通 的 Java 类 要 求 一 样 

D. JavaBean 降低 了 JSP 程序 的 复杂 度 , 同 时 也 增加 了 软件 的 可 重用 性 
2. 以 下 不 属于 JavaBean 作用 范围 的 是 ( de 


A. request B. session C. application D. scope 
3. JSP JavaBean 是 通过 指令 标记 ( — ) 来 访问 的 。 
A. <%@ page%> B. <jsp: useBean> 


C. <jsp: setProperty> D. <jsp: getProperty> 
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4. 用 于 获取 Bean 属性 的 动作 是 de 

A. <jsp: uscBean> B. <jsp: getProperty> 

C. <jsp: setProperty> D. <jsp: forward> 
5. 用 于 为 其 他 动作 提供 附加 信息 的 动作 是 (。”)。 

A. «jsp: include> B. —jsp: plugin> 

C. <jsp: pararn> D. <jsp: useBean> 
6. 不 是 JavaBean 属性 的 项 为 ( Js 

A. constrained 属性 B. id 属性 

C. bound 属性 D. simple 属性 


7. 在 JSP 页 面 中 使 用 二 jsp: setProperty name— "bean 的 名 字 " property" * " /> 
格式 ,以 表单 参数 为 Bean 属性 赋值 ,property= 二 " * "格式 要 求 Bean 的 属性 名 字 ( ) 


A, 必须 和 表单 参数 类 型 一 致 B. 必须 和 表单 参数 名 称 一 一 对 应 
C. 必须 和 表单 参数 数量 一 致 D. 名 称 不 一 定 对 应 


8. JSP 页 面 通过 (  ) 来 识别 Bean 对 象 ,可 以 在 程序 片段 中 通过 xx. method 形式 
来 调用 Bean 中 的 set 和 get 方法 。 


A. name B. class C. id D. classname 
9. JavaBean 可 以 通过 相关 ISP 动作 指令 进行 调用 。 下 面 ( ) 不 是 JavaBean 可 以 
使 用 的 jsp 动作 指令 。 
A, <jsp: useBean> B. <jsp: setProperty> 





C. <jsp: getProperty> D. «js 
10. XT JavaBean, F 9i C ) 是 不 正确 的 。 
A. JavaBean 的 类 必须 是 具体 的 和 公共 的 ,并 且 具 有 无 参数 的 构造 器 
B. JavaBean 的 类 属性 是 私有 的 ,要 通过 公共 方法 进行 访问 
C. JavaBean 和 Servlet 一 样 ,使 用 之 前 必须 在 项 目的 web. xml 中 注册 
D. JavaBean 属性 和 表单 控件 名 称 能 很 好 地 耦合 ,得 到 表单 提交 的 参数 
ll. 下 面 ( ) 不 在 Servlet 的 工作 过 程 中 。 
A. 服务 器 将 请 求 信息 发 送 至 Servlet 
B. 客户 端 运行 Applet 
C. Servlet 生成 响应 内 容 并 将 其 传 给 服务 器 
D. 服务 器 将 动态 内 容 发 送 至 客户 端 
12. FRC ANKE Servlet 中 使 用 的 方法 。 
A. doGet() B. doPost() C. service() D. close) 
13. Fii Servlet 的 ( — ) 方 法 载 人 时 执行 , 且 只 执行 一 次 ,负责 对 Servlet 进行 初 


: setParameter> 


A. service() B. init) C. doPostO D. destroy O 
14. 55 Servlet. F i ( ) 描 述 是 错误 的 。 

A. 必须 为 Tomcat 编写 一 个 部 署 文件 

B. 部 署 文件 名 为 web. xml 
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C. 部 署 文件 在 Web 服务 目录 的 WEB-INF 子 目录 中 
D. 部 署 文件 名 为 Server. xml 
15. 假设 在 MyServlet 应 用 中 有 一 个 MyServlet 类 ,在 web. xml 文件 中 对 其 进行 如 
FACE: 


<servlet> 
< servlet- name>mysrvlet < /servlet- name» 
< servlet- class? com.wgh.MyServlet < /servlet - class» 
</servlet> 
<servlet-mapping> 
< servlet - name» myservlet < /servlet- name> 
< servlet- pattern» /welcome < /url- pattern» 
€ /servlet- mapping» 
则 以 下 选项 可 以 访问 到 MyServlet 的 是 ( Ye 
A. http: //localhost: 8080/MyServlet 
B. http: //localhost; 8080/myservlet 
C. http: //localhost: 8080/com/wgh/MyServlet 
D. http: //localhost; 8080/welcome 
二 、 填空 题 
1. 在 Web 服务 器 端 使 用 JavaBean 将 原来 页 面 中 程序 片 完成 的 功能 封装 到 
JavaBean 中 ,这 样 能 很 好 地 实现 E 
2. JavaBean 中 用 一 组 set 方法 设置 Bean 的 私有 属性 值 , get 方法 获得 Bean 的 私有 
set 和 get 方法 名 称 与 属性 名 称 之 间 必 须 对 应 ,也 就 是 : 如 果 属 性 名 称 为 xxx. BB 
么 set 和 get 方法 的 名 称 必 须 为 “和 
3. 用 户 在 实际 Web 应 用 开发 中 ,编写 Bean 除了 要 使 用 import 语句 引入 Java 的 标 
准 类 ,可 能 还 需要 自己 编写 的 其 他 类 。 用 户 自 己 编写 的 被 Bean 引用 的 类 称 为 ° 
4. 创建 JavaBean 的 过 程 和 编写 Java 类 的 过 程 基本 相似 ,可 以 在 任何 Java 的 编程 环 
境 下 完成 
5. 布置 JavaBean 要 在 Web 服务 目录 的 WEB-INF \ classes 文件 夹 中 建立 与 
对 应 的 子 目 录 , 用 户 要 注意 目录 名 称 的 大 小 写 











6. 使 用 Bean 首先 要 在 JSP 页 面 中 使 用 指令 将 Bean 引入 。 
7. 要 想 在 ISP 页 面 中 使 用 Bean, 必 须 首先 使 用 动作 标记 在 页 面 中 定义 一 
个 JavaBean 的 实例 。 

8. Servlet API 的 两 个 包 分 别 是 和 

9. javax. servlet. Servlet 接口 定义 了 三 个 用 于 PR 生命 周期 的 方法 ,它们 是 
. ` 方法 。 

10. 一 般 编写 一 个 Servlet 就 是 编写 一 个 的 子 类 ,该 类 实现 响应 用 户 的 
、 等 请 求 的 方法 ,这 些 方法 是 、 等 doXXX 方法 。 








11. 使 用 cookie 的 基本 步骤 为 : 创建 cookie WR. . ,设置 cookie 
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对 象 的 有 效 时 间 。 
2. Servlet 中 使 用 Session 对 象 的 步骤 为 : 调用 得 到 Session 对 象 ,查看 
Session 对 象 ,在 会 话 中 保存 数据 。 
3. response 对 象 实现 _HttpServletResponse 接口 ,可 对 客户 的 请 求 作 出 
动态 响应 ,向 客户 端 发 送 数据 。 
4. 使 用 Servlet 处 理 表单 提交 时 ,两 个 最 重要 的 方法 是 和 
5. Serlvet 接口 只 定义 了 一 个 服务 方法 ,就 是 o 
三 、 简 答题 
- 什么 是 JavaBean? 使 用 JavaBean 的 优点 是 什么 ? 
. 一 个 标准 的 JavaBean 需要 具备 哪些 条 件 ? 
什么 是 Servlet? Servlet 的 技术 特点 是 什么 ? Servlet 与 JSP 有 什么 区 别 ? 
.创建 一 个 Servlet 通常 分 为 哪 几 个 步骤 ? 
.运行 Servlet 需要 在 web. xml 文件 中 进行 哪些 配置 ? 
. 简 述 Servlet 的 生命 周期 。 
. 简 述 Httpsession 接口 的 功能 和 使 用 方法 。 
、 程 序 题 
1. 创建 一 个 名 为 Bookinfo 的 JavaBean, 要 求 该 JavaBean 具有 name, price, stock 和 
author 简单 属性 ,属性 类 型 为 Srring。 
2. 制作 一 个 页 面 ,如 图 8-21 Bros ,在 本 页 面 设置 表单 提交 后 页 面 的 背景 颜色 ,文字 
的 大 小 .字体 和 颜色 。 表 单 提 交 后 转向 的 页 面 使 用 本 页 面 的 设置 进行 显示 。 要 求 应 用 


JavaBean 完成 。 





站 


= 


通过 JavaBean 设 置 页 面 属性 - Windows Internet Explorer 


g9 > [E http://ocshost:8080/ex [47] [x] [S00 





























JavaBean 





背景 颜色 BEY 文本 颜色 | 黑色 w| 
文字 大 小 [4 M = tt Re 























图 8-21 设置 页 面 属性 


3. 请 编写 两 个 网 页 ,其 功能 是 提供 表单 ,允许 用 户 选择 自己 想 要 的 计算 机 配件 ,选择 完 
成 后 显示 确定 的 配置 ,并 计算 出 总 价 。 要 求 必须 使 用 JavaBean 编写 。 效 果 如 图 8-22 所 示 。 

4. 编写 图 8-23 所 示 的 HTML 文件 ,利用 Servlet 的 doPost 方法 实现 Form 表单 内 
容 的 读 取 。 
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你 的 号 置 的 总 价 是 :4577 
如 果 您 不 满意 . 点 击 这 里 . 





全 林地 manet 

















请 输 : 
您 的 兴趣 : [Sleep - 
[提交 查询 内 容 ] 





图 8-23 Servlet 应 用 


5. 使 用 JavaBean 和 Servlet 实现 购物 车 .系统 实现 的 功能 包括 商品 列表 的 展示 、 添 
加 购物 车 、 删 除 购物 车 中 的 商品 等 ;系统 使 用 JavaBean 和 Servlet 的 方式 对 各 层 进行 实 
现 ,商品 须 放 在 数据 库 中 。 

商品 列表 的 展示 如 图 8-24 所 示 。 








ee 
l201103 瓜 子 — 156 渗 加 到 购物 车 
|201104| 沐 治 露 B96 he ESTILE 














BoriosuE:R — (1050 | 运动 类 二 





图 8-24 商品 列表 展示 
添加 购物 车 如 图 8-25 所 示 。 


您 的 商品 如 下 : 
商品 编号 | 商品 价格 商品 类 型 商品 数量 
201103 | 瓜子 |156 ”| 零食 类 2 
201104 ”沐浴 露 396 Wm n 
201105 Æ 105.0 ”运动 类 |1 
返回 购物 车 继 终 购物 


图 8-25 添加 购物 车 页 面 
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删除 购物 车 中 的 商品 如 图 8-26 所 示 。 
您 的 商品 如 下 ， 


201103 MF [156 食 类 
201104 RAF [39.6 品 |1 











图 8-26 删除 购物 车 商品 页 面 


$8 9 X Web 项目 开发 实例 


9.1 JSP 开 发 模式 





利用 JSP 来 开发 Web 应 用 程序 ,主要 有 两 种 开发 模式 。 
9.1.1 JSP 十 JavaBean 模式 


在 这 一 模式 中 ,JSP 页 面 负责 处 理 请 求 和 输出 响应 结果 ,并 将 其 中 发 生 的 一 些 业务 逻 
辑 交 给 JavaBean 处 理 。 该 模式 最 大 的 特点 就 是 将 一 次 请 求 的 响应 过 程 完 全 交 给 一 个 
JSP 页 面 负责 ,通过 使 用 该 模式 可 以 实现 页 面 的 显示 和 页 面 的 业务 逻辑 分 离 , 但 是 大 量 使 
用 此 模式 可 能 带 来 一 个 副作用 , 那 就 是 会 导致 在 页 面 里 面 嵌 入 大 量 的 Java 控制 代码 ,大 
量 的 内 艇 代码 使 得 页 面 变 得 庞大 ,同时 也 非常 复杂 。 当 页 面 的 功能 实现 后 交 给 美工 或 者 
页 面 内 容 设 计 人 员 进 行 包装 时 ,问题 就 变 得 严重 了 。 所 以 大 型 的 项 目 里 ,这 种 方法 将 会 导 
致 页 面 的 维护 困难 。 


9.1.2 Servlet 十 JSP 十 JavaBean 模式 


在 介绍 第 二 种 开发 模式 之 前 ,可 以 先 来 了 解 一 下 MVC 模式 。MVC( 模 型 -视图 - 控 
制 器 ) 是 20 世纪 80 年 代为 Smalltalk-80 编程 语言 发 明 的 一 种 软件 设计 模式 , 它 是 一 种 
分 离 业务 逻辑 与 显示 界面 的 设计 方法 , 它 强 制 性 地 使 应 用 程序 的 输入 ` 处 理 和 输出 
BH o 

MVC 应 用 程序 被 分 成 三 个 核心 部 件 : 模型 .视图 、 控 制 器 ,它们 各 自 处 理 自己 的 任 
务 。MVC 设计 模式 如 图 9-1 所 示 。 

其 中 ,视图 是 用 户 看 到 并 与 之 交互 的 界面 。 在 MVC 模式 下 ,视图 并 不 处 理 数据 。 
实际 上 ,界面 的 每 一 部 分 都 只 能 包含 采集 数据 的 功能 ,并 把 数据 传递 给 设计 模式 中 的 
其 他 组 成 部 分 进行 处 理 ; 模 型 表示 业务 数据 和 业务 规则 。 在 MVC 的 三 个 部 件 中 ,模型 
拥有 最 多 的 处 理 任务 , 它 是 真正 完成 任务 的 代码 。 模 型 通常 被 称 为 “业务 逻辑 ”; 控 制 
器 接收 用 户 的 输入 并 调用 模型 和 视图 去 完成 用 户 的 需求 。 所 以 当 单 击 Web 页 面 中 的 
超 链接 和 发 送 HTML 表单 时 ,控制 器 本 身 不 输出 任何 内 容 和 做 任何 处 理 。 它 只 是 接 
收 请 求 并 决定 调用 哪个 模型 构件 去 处 理 请 求 , 然 后 确定 用 哪个 视图 来 显示 模型 处 理 返 
回 的 数据 。 采 用 MVC 模式 构建 的 系统 具有 极 高 的 可 维护 性 、 可 扩展 性 、 可 移植 性 和 组 
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状态 查询 模型 状态 改变 
让 一 一 一 一 | 封装 应 用 程序 状态 
通知 改变 | 响应 状态 查询 
p.n 应 用 程序 功能 
| 通知 视图 改变 
1 
m— 
MR 实 义 应 用 程序 行为 
PR ps | MOAR | 用 户 动作 映 遇 成 模型 更 新 
允许 控制 器 选择 视图 选择 响应 的 视图 
方法 调用 ““- 一 -一 ---- 一 事件 





图 9-1 MVC 结构 图 


件 的 可 复 用 性 。 

Servlet 十 JSP 十 JavaBean 技术 借鉴 了 MVC 模式 来 实现 显示 内 容 与 业务 逻辑 的 完全 
分 离 , 它 综合 采用 由 Servlet 处 理 请 求 和 控制 业务 流程 ,JSP 输出 响应 结果 ,JavaBean 负责 
具体 的 业务 数据 和 业务 规则 。 在 该 模式 中 ,Servlet 不 再 担负 生成 显示 内 容 的 任务 ,而 
JSP 也 只 是 简单 地 从 Servlet 控制 的 JavaBean 对 象 中 检索 数据 ,然后 将 结果 插入 JSP 的 
预定 义 模 板 ,从 而 使 不 懂 Java 代码 的 普通 HTML 设计 人 员 完 全 可 以 编写 和 维护 JSP 页 
面 。 在 实际 的 项 目 开发 过 程 中 ,页 面 设 计 者 可 以 方便 地 使 用 普通 的 HTML 工具 开发 JSP 
页 面 ,Servlet 和 JavaBean 适合 后 端 开 发 者 使 用 。 开 发 Servlet 和 JavaBean 需要 的 工具 是 
Java 集成 开发 环境 ,对 技术 的 要 求 也 更 为 专业 一 些 。 

此 模式 可 以 更 加 明显 地 把 显示 和 业务 逻辑 分 离 , 使 得 代码 比 JSP 十 JavaBean 模式 更 
容易 管理 ,适合 大 型 项 目的 开发 。 


9.2 “ 吃 遍 天 下 ”美食 团购 网 站 的 设计 与 实现 





9.2.1 系统 分 析 与 设计 


本 项 目 综合 使 用 本 书 中 所 讲 到 静态 页 面 和 动态 页 面 的 开发 技术 以 及 数据 库 的 访问 技 
术 来 构建 一 个 完整 的 美食 团购 网 站 系统 。 项 目 设 定 的 目标 为 : 
(1) 系统 须 提供 友好 的 用 户 界面 ,使 得 顾客 、 商 家 在 这 个 平台 上 进行 交易 ,管理 员 在 


这 个 平台 上 进行 管理 操作 。 
(2) 系统 采用 友好 的 页 面 以 及 多 种 便捷 检索 方式 ,方便 管理 员 管理 以 及 商家 和 顾客 
的 使 用 。 


(3) 系统 应 有 良好 效率 和 可 扩充 性 ,以 保证 操作 的 高 效 运行 和 方便 未 来 新 业务 的 
加 入 。 

根据 系统 开发 目的 ,系统 分 为 顾客 登录 、 商 家 登录 ,管理 员 登 录 三 个 登录 模块 。 顾 客 
通过 浏览 商品 来 选 购 所 需 团购 产品 ,也 可 对 商品 发 表 评论 。 同 时 商家 可 以 通过 发 布 产 品 、 
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查看 订单 来 进行 产品 的 管理 。 管 理 员 可 以 管理 商铺 、 产 品 和 用 户 。 


顾客 部 分 包括 查看 、 购 买 ,评论 等 功能 。 商 家 部 分 可 以 完成 浏览 产品 发布 产品 、 查 看 


订单 购买 .评论 等 功能 。 管 理 员 部 分 包括 审批 店铺 、 管 理 用 户 、 管 理 店铺 经 营 项 目 、 


商品 等 功能 。 


根据 高 内 聚 、 低 耦合 的 设计 要 求 ,该 系统 的 功能 模块 划分 如 图 9-2 所 示 。 





吃 遍 天 下 美食 团购 系统 
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普通 用 户 模块 商家 模块 管理 员 模块 
| I I 
注 || 登 || 查 || 查 || 评 || 团 || 修 管 || 查 || 注 || 修 审 || 添 || 添 || 管 || 管 
骨 || 录 || 询 || 看 || 论 || 购 || 改 理 || 看 || 册 || 改 | |f m |n | P 
商 || 订 || 美 || 美 || 密 美 || 订 || 店 || 店 店 || 用 || 丙 || 类 || 商 
品 || 单 || 食 || 食 || 码 食 || 单 || 铺 || 铺 | | 和 铺 || 户 || 家 || 别 || 品 
图 9-2 美食 购物 系统 模块 划分 图 
用 户 模块 主要 包含 以 下 页 面 : 


(1) 团购 网 站 首页 一 一 整体 风格 ,通过 连接 数据 库 显示 美食 类 别 和 可 团购 美食 数据 。 


(2) 查询 页 面 一 一 通过 关键 字 及 条 件 查 找 所 需要 的 信息 。 
(3) 商品 信息 页 面 一 一 总 体 显示 团购 商品 信息 。 

(4) 商家 信息 页 面 一 一 显示 商家 信息 。 

(5) 登录 验证 页 面 一 一 当 客户 进行 登录 时 进行 数据 验证 。 
(6) 注册 页 面 一 一 提供 用 户 的 注册 。 

(7) 订单 显示 页 面 一 一 显示 已 生成 订单 。 

(8) 密码 修改 页 面 一 一 修改 用 户 密码 。 

(9) 发 布 评论 页 面 一 一 对 产品 进行 评论 。 

商家 模块 主要 包含 以 下 页 面 : 

(1) 商品 信息 管理 页 面 一 一 对 商品 信息 进行 添加 与 修改 。 
(2) 店铺 信息 管理 页 面 一 一 对 商店 的 资料 进行 修改 。 
(3) 用 户 团购 订单 页 面 一 一 查看 客户 所 团购 的 美食 的 信息 。 
(4) 商家 注册 页 面 进行 商家 的 注册 。 

管理 员 模 块 主要 包含 以 下 页 面 : 

(1) 注册 用 户 页 面 一 一 帮助 生成 用 户 。 

(2) 店铺 注册 页 面 一 一 帮助 注册 店铺 。 

(3) 店铺 审批 页 面 一 一 审批 店铺 ,使 其 可 以 发 布 商品 。 

















(4) 所 有 用 户 团购 美食 页 面 一 一 用 于 在 管理 员 功 能 模块 显示 所 有 团购 的 产品 信息 。 


C5) 商品 类 别管 理 页 面 一 一 添加 、 修 改 、 删 除 商品 类 别 。 


9.2.2 数据 库 设 计 


本 系统 数据 库 使 用 MySQL ,建立 数据 库 ,在 其 中 建 五 张 表 ,具体 结构 如 下 : 
(1) 用 户 数 据 库 (users) 表 格 主 要 用 于 存放 顾客 和 商家 以 及 店铺 的 信息 。 具 体 表格 


设计 如 表 9-1 所 示 。 
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表 9-1 用 户 数据 库 (users) 



























































列 名 数据 类 型 是 否 允 许 空 说 明 
ID bigint(20) unsigned 主键 编号 
userName varchar(50) 否 用 户 名 
userPassword varchar(50) 否 密码 
email varchar(50) 是 电子 邮件 
sex int(4) 否 性 别 
identityID varchar(20) 否 身份 证 
shopName varchar(100) 是 店名 
shopIntro text 是 店铺 介绍 
Shopper varchar(100) 是 店主 
realName varchar(20) 是 真名 
mainFields bigint(20) unsigned 否 业务 类 别 
Telephone varchar(20) 是 电话 
createDate date 否 创建 时 间 
sysRole 1 int(4) unsigned 是 系统 角色 
tag int(4) 8 标记 





(2) 商品 数据 库 (goods) 表 格 是 用 来 存放 商家 发 布 的 产品 信息 的 数据 库 , 具 体 表格 设 


计 如 表 9-2 所 示 。 


表 9-2 商品 信息 库 (goods) 
































列 名 数据 类 型 是 否 允 许 空 说 g 
ID bigint(20) unsigned 主键 编号 
title varchar(100) 是 名 称 
description text 是 产品 介绍 
issuer bigint(20) unsigned 否 商家 用 户 编号 
goodsField bigint(20) unsigned 8 产品 类 别 
linkMan varchar(50) 是 联系 人 
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续 表 
列 名 数据 类 型 是 否 允 许 空 说 明 

telephone varchar(20) 是 电话 
goodsURL varchar(50) 是 产品 图 片 地址 
Price bigint(20) unsigned 8 市 场 价格 
tPrice bigint(20) unsigned 5 团购 价格 
createDate date 否 创建 时 间 
goodsType int(4) unsigned 是 产品 类 型 
tag int(4) a 标记 











(3) 产品 类 别 (goodsField) 表 格 是 用 来 存放 美食 产品 的 分 类 ,具体 表格 设计 如 表 9-3 











所 示 。 
表 9-3 产品 类 别 (goodsField) 
列 名 数据 类 型 是 否 允许 空 说 明 
ID bigint(20) unsigned 主键 编号 
name varchar(100) 是 类 型 名 称 
tag int(4) 8 标记 











(4) 用 户 评论 (discussion) 表 格 是 用 来 存放 用 户 对 于 产品 的 评论 内 容 的 ,具体 表格 设 


计 如 表 9-4 所 示 。 


R 9-4 用 户 评论 (discussion) 


























列 名 数据 类 型 是 否 允 许 空 说 明 
ID bigint(20) unsigned 主键 编号 
goodsID bigint(20) unsigned 8 产品 编号 
authorID bigint(20) unsigned 否 用 户 编 号 
authorName varchar(100) 是 用 户 名 
content text 是 内 容 
createDate date 否 发 表 时 间 
disType int(4) unsigned 是 评论 类 型 
tag int(4) 8 标记 














(5) 用 户 团购 (buy) 表 格 是 用 来 存放 用 户 所 团购 的 美食 的 ,具体 表格 设计 如 表 9-5 


所 示 。 
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表 9-5 用 户 团 购 表 (buy) 

















列 名 数据 类 型 是 否 允 许 空 说 明 
ID bigint(20) unsigned 主键 编号 
userID bigint(20) unsigned 否 用 户 编 号 
goodsID bigint(20) unsigned 否 产品 编号 
tag int(4) Ei 标记 














通过 建立 一 系列 表格 ,可 以 很 方便 快捷 地 满足 对 数据 存放 的 要 求 , 不 存在 元 余 , 从 而 
最 终 实现 对 数据 的 高 效 管理 与 利用 。 

9.2.3 系统 实现 

1. 系统 初步 设置 


主页 面 如 图 9-3 所 示 ,这 是 一 个 经 典 的 框架 结构 , 左 侧 可 以 显示 所 有 的 美食 类 别 , 主 
框架 中 可 以 显示 美食 类 别 、 美 食 名 称 市场 价 格 .团购 价格 以 及 所 属 店铺 。 


GG merchanthdaForm jsp | Ẹ) werchantAdiSawe. jsp | ©) alUseList jsp | E MGocdslist jm | "rs ED 











Qoo WP [Mts Mocathost BOBO seb index. jsp vu 














HARA 美食 类 别 RAK 市 场 价格 团购 价格 所 属 店铺 
Ait Bae jae 100 to i] 
HERR 

JR 
火锅 
[d 
自助 餐 
图 9-3 系统 主页 面 


上 面 框架 的 菜单 中 除了 注册 和 登录 功能 以 外 还 包含 查询 、 商 品 信息 和 商店 信息 。 该 
模块 为 全 网 站 的 导航 页 ,显示 美食 类 别 和 可 团购 的 美食 数据 。 实 现 方式 是 : 在 JSP 文件 
中 引入 相关 JavaBean 文件 后 ,通过 实例 化 JavaBean 中 的 类 来 实现 与 数据 库 的 连接 和 信 
息 读 取 。 通 过 代码 连接 数据 库 并 得 到 一 个 数据 记录 集 对 象 rs, 通 过 rs 对 象 可 以 查看 数据 
库 记 录 。 

主页 面 index. jsp 的 具体 实现 代码 : 


<%@page language- "java" contentType- "text/html; charset=GB2312" 
pageEncoding- "GB2312"$ > 

«html» 

«head» 
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<meta http- equiv= "Content-Type" content- "text/html; charset=GB2312"> 

<title> 吃 遍 天 下 美食 团购 网 站 < /title> 

</head> 

< frameset rows="110, * " cols-" * " frameborder- "NO" border="0" framespacing- "0"> 

< frame name- "topFrame" scrolling- "NO" noresize src- "anonymity top.jsp"» 

< frame name- "mainFrame" src= "firstmanagement.jsp" scrolling- "AUTO"» 

</frameset> 

<noframes> 

<center> < font size- "5" color="# FF0000"><b> 该 页 面 要 求 浏览 器 支持 框架 集 !< /b> 
< /font> 

</center> 

</noframes> 

</html> 


topFrame 框架 中 是 页 面 anonymity. top. jsp ,其 关键 代码 如 下 : 


<body background- "1.jpg"» 
<div align="center"> 
<table width= "80$ "> 
<tr> 
<td colspan- "8" align="center"> 
<font size="9"><b> 吃 遍 天 下 美食 团购 网 站 < /b>< /font> 
<br> 
</td> 
</tr> 
<tr> 
<td align="center"> < a href= "firstmanagement.jsp"target- "mainFrame"» Ë Ji < /a> 
< /td» 
<td align- "center"» < a href= "searchForm. jsp" target- "mainFrame"» # if] < /a» < /td 
> 
«td align= "center"><a href- "showGoods.jsp" target- "mainFrame"> 商 品 信息 </a>< /td> 
«td align= "center"><a href- "showMerchant.jsp" target- "mainFrame"> 商 店 信息 < /a>< /td> 
< td align= "center"> <a href= "userLogin.jsp" target- "mainFrame"> 登录 < /a» < /td 
> 
<td align= "center"><a href="reg.jsp" target= "mainFrame"> 注 册 < /a>< /td> 
</tr> 
</table> 
</div> 
</body> 


mainFrame 框架 中 是 页 面 firstmanagement. jsp ,其 关键 代码 如 下 : 


<html> 
<head> 

«meta http- equiv= "Content-Type" content- "text/html; charset=GB2312"> 
<title> 吃 遍 天 下 美食 团购 网 站 < /title> 
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</head> 
< frameset cols="140, * " frameborder- "NO" border-"1" framespacing="1" rows="* "> 
<frame name="first_left" scrolling="AUTO" src-"first left.jsp"» 
<frame name- "first main" src="first.jsp" scrolling- "AUTO" 
</frameset> 
<noframes> 
< center> < font size="5" color="# FF0000"><b> 该 页 面 要 求 浏览 器 支持 框架 集 < /b> 
< /font> 
</center> 
< /noframes> 
</htm> 


其 中 ,first_left 的 页 面 是 first left. jsp, 其 关键 代码 如 下 ; 


<% @ page language =" java” contentType =" text/html; charset = GB2312" import = 
"java.sql.* ,com.tuan. * " pageEncoding- "GB2312"$ > 
X jsp:useBean scope= "page" id= "goodsField" class- "com.tuan.goodsField" /> 
€ jsp:useBean scope- "page" id- "executeWay" class- "com.tuan.executeWay" /> 
«html» 
<head> 
<meta http- equiv- "Content- Type" content= "text/html; charset=GB2312"> 
<title> 吃 遍 天 下 美食 团购 网 站 < /title> 
< /head» 
X body bgcolor- "A0FFFF"» 
«tr» 
<table width- "98$" style= "text- align:center"» 
«tr» 
«td align- "center"» « font size="4"><a href- "first.jsp" target- "first 
_main"> 所 有 类 别 </a>< /£ont» « /td> 
</tr> 
<% 
ResultSet rs=goodsField.showAllFields (); 
while (rs.next () ) 
{ 
5» 
«tr» 
<td> &nbsp;« a href-first 1.jsp? ID=<%=rs.getLong("ID")% > target- " 
first_main"><%=rs.getString ("name") % >< /a» « /td» 
</tr> 
<% 
} 
$5 
</table> 
</tr> 
</body> 
</html> 


279 


Web 项 目 开发 实践 教程 


在 这 个 页 面 中 使 用 了 美食 项 目 属性 及 操作 的 Java Bean 





goodsField. java, 并 连接 


了 数据 库 ( 连 接 数据 库 的 JavaBean 为 OpenDB. java) ,使 用 goodsField. showAllFields() 
获取 到 所 有 美食 的 结果 集 , 并 通过 while 循环 将 其 输出 。 其 具体 实现 过 程 包括 以 下 几 段 


代码 。 


CD 连接 数据 库 的 代码 (OpenDB. java) : 


package com.tuan; 
import java.sql.* ; 
public class OpenDB 


{ 


} 


String userName= "root"; 
String userPassword- "123456"; 
private String driverName- "org.gjt.mm.mysql.Driver"; 
private String url- 
"jdbc:mysql://localhost/tuan? useUnicode- 
true&characterEncoding- GB2312"; 
Connection dbConn; 
public OpenDB() 
{ 
} 
public Connection getConnection () 
{ 
try 
{ 
Class.forName (driverName) ; 
dbConn- DriverManager.getConnection (url, userName, userPassword) ; 
F 
catch (Exception ex) 
{ 
System.out.println(ex.toString()); 
dbConn- null; 
} 
return dbConn; 


(2) 美食 项 目 属 性 及 操作 的 JavaBean(com. tuan. goodsField. java) 的 代码 。 


package com.tuan; 
import java.sql.* ; 
public class goodsField extends executeWay 


{ 


public long ID; 
public String name; 
public int tag; 
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private String strSql; 
public goodsField() 


t 


super(); 
ID-0; 
name-""; 
tag-0; 
strSql-""; 


public boolean add() 


{ 


} 


strSql="insert into goodsField "; 
strSql-strSql*"("; 

strSql= strSql* "name, "; 
strSql=strSql+ "tag"; 
strSql=strSql+") "; 

StrSql- strSql* "values ("; 
strSql=strSql+"'"+namet+"',"; 
strSql=strSql+"'"+tag+"'"; 
strSql=strSql+")"* 

boolean isAdd- super.exeSqlUpdate (strSql) 
return isAdd; 


public boolean delete (String webID) 


{ 


{ 


strSql="delete from 'goodsField' where ID='"; 
strSql=strSql+webID+ "'"; 

boolean isDelete- super.exeSqlUpdate (strSql) + 
return isDelete; 


public boolean updateField (String webID) 


strSqgl- "update goodsField set "; 

strSql=strSql+ "name="+"'"+namet "'"; 

strSql=strSql+" where ID='"+webID+"'"; 

boolean updateField- super.exeSqlUpdate (strSql) 
return updateField; 


public boolean init (String webID) 


strSql="select * from 'goodsField' where ID="; 
strSql= strSql+"""+webID+"'"; 

try 

1 
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ResultSet rs= super.exeSglQuery (strSql) 
if (rs.next()) 
{ 
ID-rs.getLong ("ID"); 
name- rs.getString ("name"); 
tag-rs.getInt ("tag"); 
return true; 


catch (Exception ex) 

t 
System.out.println (ex.toString()); 
return false; 


) 
public ResultSet showAllFields() 
{ 
strSql="select * from 'goodsField' where tag!=-1"; 
ResultSet rs=null; 
try 
{ 
rs=super.exeSqlQuery (strSql); 
} 
catch (Exception ex) 
{ 
System.out.println(ex.toString()); 
} 
return rs; 
} 
} 


其 中 ,goodsField 作为 executeWay 的 子 类 , 则 executeWay. java 的 源 代 码 如 下 : 


package com.tuan; 
import java.sql.* ; 
public class executeWay extends OpenDB 
{ 
private Connection dbConn; 
private Statement stmt; 
private ResultSet rs; 
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private int errNum; 
private String errDesc; 
public executeWay () 


£ 


) 


dbConn- super .getConnection() ; 
stmt-null; 

rs-null; 

errNum- 0; 








errDesc- 


public boolean exeSqlUpdate (String strSql) 


t 


try 

t 
stmt- dbConn.createStatement () ; 
stmt.executeUpdate (strSql); 
this.errNum- 0; 
return true; 

} 

catch (Exception ex) 

{ 
this.errNum=- 1; 
this.errDesc=ex.toString(); 
return false; 

) 

finally 

t 

} 


public ResultSet exeSqlQuery (String strSql) 


try 

{ 
stmt=dbConn.createStatement () 7 
rs= stmt .executeQuery (strSql); 
this.errNum- 0; 

} 

catch (Exception ex) 

$ 


this.errNum-- 1; 
this.errDesc-ex.toString(); 
rs-null; 
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finally 
{ 
} 
return rs; 
} 
public int getErrNum() 
{ 


return errNum; 
} 
public String getErrDesc() 
{ 

return errDesc; 


} 


主页 面 是 一 个 经 典 的 框架 结构 ,其 中 first_main 的 页 面 是 first. jsp, 使 用 了 如 前 所 述 
的 商品 操作 的 JavaBean 和 连接 数据 库 的 JavaBean, 其 关键 代码 如 下 : 


<%@page language- "java" contentType- "text/html; charset=GB2312" import= 
"java.sql.* ,com.tuan.* "  pageEncoding- "GB2312"$ > 

« jsp:useBean scope- "page" id= "goods" class- "com.tuan.goods" /> 

« jsp:useBean scope- "page" id- "user" class- "com.tuan.user" /> 


X jsp:useBean scope- "page" id- "executeWay" class- "com.tuan.executeWay" /> 


<table width= "98$" style= "text- align:center"» 
<tr bgcolor= "# FOFOFO"> 
<td align="center">< font size= "4"> 美 食 类 别 < /font>< /td» 
<td align="center">< font size="4"> 美 食 名 称 < /font>< /td> 
«td align= "center">< font size="4"> 市 场 价 格 < /£ont» « /td> 
<td align= "center">< font size= "4"> 团 购 价格 < /font>< /td> 
<td align="center">< font size= "4"> 所 属 店铺 < /font>< /td> 
</tr> 
<% 
ResultSet rs=goods .showGoods () ; 
while (rs.next()) 
{ 
String strSqll=" select name from goodsField where ID= '"+ rs. getLong (" 
goodsField")+"'"; 
String strSql2="select * from users where ID- '"4 rs.getLong("issuer")"'"; 
ResultSet rsl- executeWay.exeSqlQuery (strSqll); 
ResultSet rs2- executeWay.exeSqlQuery (strSql2); 
rsl.first(); 
rs2.first(); 
s» 
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<tr> 
<td> gnbsp;<%=rsl.getString ("name") $ >< /td> 
<td> &nbsp;« a href= goodsShow. jsp? ID=<%=rs.getLong ("ID") % > target=_ 
blank»«$-rs.getString ("title") $>< /a» « /td» 
<td> &nbsp;« &— rs.getLong ("price")$»« /td» 
«td» &nbsp;« $— rs.getLong("tprice")$»« /td> 
«td» &nbsp;« %=rs2.getString ("shopName") % ></td> 


这 个 页 面 中 涉及 美食 商品 属性 的 Java Bean—— com. tuan. goods. java, 其 源 代码 如 下 : 





package com.tuan; 
import java.sql. * ; 
import java.text. * ; 
public class goods extends executeWay 
{ 
public long ID; 
public String title; 
public String description; 
public long issuer; 
public long goodsField; 
public String linkMan; 
public String goodsURL; 
public long price; 
public long tprice; 
public String telephone; 
public String createDate; 
public int goodsType; 
public int tag; 
private String strSql; 
private SimpleDateFormat dateFormatter; 
public goods () 
{ 
super () 7 
dateFormatter=new SimpleDateFormat ("yyyy- MM- dd") ; 
ID-0; 
title-""; 





description 





issuer- 





linkMan-""; 

goodsURL- ""; 

telephone-""; 

goodsField-0; 

price-0; 

tprice-0; 

createDate- dateFormatter.format (new java.util.Date()); 
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public boolean add() 

{ 
strSql- "insert into goods "; 
strSql-strSqle"("; 
strSql-strSql* "title, "; 
strSql=strSql+ "description, "; 
strSql= strSql+ "issuer, "; 
strSql= strSql+ "goodsField, "; 
strSql=strSql+ "linkMan, "; 
strSql- strSql* "goodsURL, "; 
strSql=strSql+ "price, "; 
strSql- strSql* "tprice,"; 
strSql= strSql* "telephone, "; 
strSql- strSql* "createDate, "; 
strSql=strSql+ "goodsType, "+ 
strSql=strSql+ "tag"; 
strSql=strSql+") "; 
strSql=strSql+ "values ("; 
strSql=strSql+"'"+titlet+"',"7 
strSql=strSql+"'"+descriptiont"',"7 
strSql=strSql+"'"+ issuert+"',"7 
strSql= strSql+ "'"+ goodsField+ 
strSql=strSql+ "'"+ linkMan+ "',"; 
strSql=strSql+ "'"4 goodsURL* "',"; 
strSql-strSql* "'"*pricet"',"; 
strSql=strSql+" 
strSql=strSql+" 
strSql- strSql* "'"4createDate*"',"; 
strSql- strSql+ "'"4goodsType* "',"; 
StrSql- strSqlt "'"4tagr"'"; 








4tpricet"',"; 





'+ telephonet+ "', "7 








strSgl-strSqle")"; 
boolean isAdd- super.exeSqlUpdate (strSql); 


return isAdd; 
H 
public boolean modifyGoodsInfo (String webID) 
t 


strSql- "update goods set"; 
strSql=strSql+" title="+"'"+title+"',"7 
strSql=strSql+" description- "t "'"tdescriptiont"',"; 
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strSql= strSql+" issuer="+"'"+issuer+"',"; 
strSql=strSql+" goodsField- "+"'"+goodsField+ "',"; 
strSql-strSql*" linkMan="+"'"+ linkManr "',"; 
strSql=strSql+" goodsURL- "4 "'"4 goodsURL+ "',"; 
strSql- strSql*" price- "+ "'"pricet"',"; 
strSql=strSql+" tprice- "+ "'"rtpricer"',"; 
strSql- strSql*" telephone- "+ "'"4 telephonet "',"; 
strSql- strSql*" createDate- "+ "'"r createDater "',"; 
strSql- strSql*" goodsType- "+ "' "4 goodsTypet "' ,"; 
strSql=strSql+" tag= "+ "'"Ltagr"'"; 
strSql=strSql+" where ID='"+webIDt"'"; 
System.out.println (strSql); 
boolean isUpdate- super.exeSqlUpdate (strSql); 
return isUpdate; 
) 
public boolean delete (String webID) 
{ 
strSql="delete from 'goods' where ID='"; 
strSql=strSql+webID+ "'"; 
boolean isDeletel- super.exeSqlUpdate (strSql); 
System.out.println (strSql); 
strSql- "delete from 'discussion' where goodsID- '"; 
strSql- strSql* webID+ "'"; 
boolean isDelete2- super.exeSqlUpdate (strSql); 
System.out.println (strSql) + 
strSql="delete from 'buy' where goodsID- '"; 
strSql=strSql+webID+ "'"; 
boolean isDelete3- super.exeSqlUpdate (strSql); 
System.out.println (strSql); 
boolean isDelete- isDelete3&&isDelete2&&isDeletel; 
return isDelete; 
) 
public boolean init (String webID) 
{ 
strSql="select * from 'goods' where ID="; 
strSql=strSql+"'"+webID+ "'"; 
try 
{ 
ResultSet rs=super.exeSqlQuery (strSql) ; 
if (rs.next()) 
{ 
ID=rs.getLong ("ID"); 
title=rs.getString ("title"); 


description=rs.getString ("description"); 
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} 


issuer=rs.getLong ("issuer"); 
goodsField- rs.getLong ("goodsField") ; 
linkMan- rs.getString ("linkMan"); 
goodsURL= rs .getString ("goodsURL") ; 
price=rs.getLong ("price"); 
tprice-rs.getLong("tprice"); 
telephone rs.getString ("telephone"); 





createDate= rs.getString ("createDate"); 
goodsType- rs.getInt ("goodsType") ; 
tag-rs.getInt ("tag"); 

return true; 


catch (Exception ex) 

{ 
System.out.println(ex.toString()); 
return false; 


public ResultSet showGoodsByMerchant (String webID) 


{ 


) 


strSql="select * from 'goods' where tag!-- 1 and issuer- '"4 webID* "'"; 
ResultSet rs-null; 
try 
t 

rs- super.exeSqlQuery (strSql); 

4 
catch (Exception ex) 
{ 

System.out.println(ex.toString()); 

} 
return rs; 


public ResultSet showGoods () 


{ 


strSql-"select * from 'goods' where tag!-- 1 and goodsType=2"; 
ResultSet rs-null 


try 
{ 





rs= super .exeSqlQuery (strSql); 
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} 
catch (Exception ex) 
{ 
System.out.printIn (ex.toString()) + 
} 
return rs; 
} 
public ResultSet showGoods1 (String webID) 
{ 
strSql="select * from 'goods' where tag!=-1 and goodsField="; 
strSql=strSql+"'"+webID+"'"; 
ResultSet rs=null; 
try 
{ 
rs- super .exeSqlQuery (strSql); 
} 
catch (Exception ex) 
t 
System.out.println(ex.toString()); 
} 
return rs; 


) 


2. 系统 用 户 角色 设置 

系统 的 用 户 类 型 分 为 三 种 : 普通 用 户 、 商 家 和 管理 员 。 在 数据 库 中 ,以 sysRole 字段 
来 区 分 三 种 用 户 的 身份 , 值 为 0 代表 “管理 员 ”. 值 为 1 代表 “普通 用 户 ”, 值 为 2 代表 “ 商 
家 ”。 具 体 实现 效果 如 图 9-4 所 示 , 当 用 户 拥 有 账号 后 即 可 登录 系统 ,在 用 户 输入 完 用 户 
名 与 密码 后 , 单 击 “ 登 录 ” 按 钮 就 可 将 登录 表单 中 的 数据 提交 给 服务 器 了 ,具体 实现 与 用 户 

Binderiop [BinfoManegementisp [È logoutisp E lognCheckisp [S normal topisp (SGA ROR =o 


(po WP Mipi/lccalhost 8060/shop/ ->H 
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注册 模块 相 类 似 。 提 交 后 的 信息 通过 登录 验证 页 面 logincheck. jsp 进行 检查 ,看 信息 是 
和 否 与 数据 库 中 相符 ,如 果 相符 则 转 和 人 用户 登录 后 的 主页 面 normal. index. jsp, 如 果 不 相符 
则 给 出 提示 信息 并 转 回 登 录 页 面 。 

其 关键 代码 如 下 (userLogin. jsp) : 


<script ID-clientEventHandlersJS LANGUAGE- javascript» 
<i = 
function forml_onsubmit () 
{ 
if (forml.txtloginName.value-- "") 
t 
alert ("请 填写 用 户 名 !"); 
forml.txtloginName.focus(); 
return false; 
J 
if (forml.txtpassword.value=="") 
{ 
alert ("请 填写 密码 1"); 
form] .txtpassword. focus () 7 


return false; 


) 
function userRegister () 
{ 
window.open ("userRegister.jsp") 
} 
H--» 
</script> 
< form name= forml method="post" target="_top" action="loginCheck.jsp" onSubmit=" 
return forml_onsubmit () "> 
< font color="# 000099" size="3" face-"Arial, Helvetica, sans- serif">< 
strong» JH P! 4&4 :< /strong» « /font> 
<td width= "155"» 
«input name-"txtloginName" style- "HEIGHT: 20px; WIDTH: 150px" size- "50" 
maxlength- "50"> 
</td> 
< font color="# 000099" size="3" face-"Arial, Helvetica, sans- serif">< 
strong> #1 :< /strong>< /font> 
«input name="txtpassword” style="HEIGHT: 20px; WIDTH: 150px" size="20" 
maxlength="20" type- "password"» 
<font color= "#000099" size- "3" face-"Arial, Helvetica, sans- serif"»« 
strong» JH P! ÆW :« /strong» « /font> 
«td colspan="2"> 
<select name- "userType"» 
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<option value="1" selected> 普 通用 户 < /option> 
<option value="2"> 商 家 < /option» 
<option value= "0"> 管 理 员 < /option> 
</select> 
< input type="submit" name="btnSubform" value="% 3* "> &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; nbsp; 
«input type- "reset" name- "reset" value- " 重 填 "> 
</div> 
</form> 


由 form 的 action 属性 可 知 , 单 击 * 登 录 ” 按 钮 以 后 数据 由 loginCheck. jsp 页 面 接收 和 
处 理 ,loginCheck. jsp 页 面 的 源 代码 如 下 : 


<body bgcolor= "AOFFFF"> 
<jsp:useBean id= "user" scope- "session" class- "com.tuan.user" /> 
<% 
String userName= request .getParameter ("txtloginName") ; 
String userPassword- request .getParameter ("txtpassword"); 
String sysRole- request.getParameter ("userType") 7 
if (user.isValidUser (userName, userPassword, sysRole) ) 
{ 
if (sysRole.compareTo ("0")==0) 
i 
response.sendRedirect ("admin/admin index.jsp"); 
I 
if (sysRole.compareTo ("1")==0) 
{ 
response.sendRedirect ("normal index.jsp"); 
i 
if (sysRole.compareTo ("2" 
{ 





response.sendRedirect ("merchant /merchant_index.jsp"); 


else 
{ 
$> 

<center>< font size="5" color= "#FF0000"><b> 登 录 失 败 , 请 检查 您 的 用 户 名 和 密码 

</b></font>< /center> 
<br><br> 
< center > < input type="button" name="goback" value ="i& [A] " onClick= 
"javascript :window.history.go(-1)"></center> 

<% 
} 
&> 
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< /body> 
其 中 有 关 用 户 的 JavaBean(com. tuan. user. java) 的 源 代码 如 下 : 


package com.tuan; 
import java.sql. * ; 
import java.text. * ; 
public class user extends executeWay 
t 
public long ID; 
public String userName; 
public String userPassword; 
public String email; 
public int sex; 
public String identityID; 
public String shopName; 
public String shopIntro; 
public String shopper; 
public String realName; 
public long mainFields; 
public String telephone; 
public String createDate; 
public int sysRole; 
public int tag; 
private String strSql; 
private SimpleDateFormat dateFormatter; 
public user() 
t 
dateFormatter- new SimpleDateFormat ("yyyy- MM- dd") ; 
ID-0; 
userName- ""; 
userPassword- ""; 
realName- ""; 
sex-0; 
ShopName- ""; 
Shopper-""; 
mainFields-0; 





shopIntro- 





telephone- ""; 





identityID-""; 
sysRole-0; 





email-""; 

createDate-dateFormatter.format (new java.util.Date ()); 
tag-0; 

strSgl-""; 


) 


第 9 章 


public boolean add() 


{ 


$ 


strSql= "insert into users "; 

strSql- strSqle"("; 

StrSql- strSql* "userName, "7 

StrSql- strSql* "userPassword, "; 
strSql-strSql* "email, "; 

strSql- strSql* "sex,"; 

strSql- strSql* "identityID,"; 

strSql= strSql* "shopName, "; 

strSql- strSql* "shopIntro, "; 

strSql- strSql* "shopper, "; 

StrSql- strSql* "realName, "; 
strSql=strSql+ "mainFields,"; 

strSql- strSql* "telephone, "; 

strSql- strSql* "createDate, "; 

strSql- strSql* "sysRole, "; 

strSql- strSql* "tag"; 
strSql=strSql+") "; 

strSql=strSql+ "values ("; 
strSql=strSql+"'"+userName+"", "7 
strSql=strSql+ "'"+userPassword+ "',"; 
strSql=strSql+"'"+email+"',"; 
strSql- strSql* "'"4sext"',"; 
strSql=strSql+"'"+ identityID* "',"; 
strSql=strSql+ "'"+ shopName+ "',"; 
strSql=strSql+" 
strSql=strSql+"'"+ shopper+ "',"; 
strSql=strSql+"'"+ realName+ "',"; 
strSql=strSql+ "'"+mainFields+"',"; 
strSql=strSql+" 
strSql=strSql+"'"+ createDatet+"',"; 








+ shopIntro*"',"; 








'+ telephonet+ "', "7 


strSql=strSql+ "'"+ sysRolet "',"; 
strSql=strSql+"'"+tagt"'""; 








strSql- strSqle")"; 
System.out.println (strSql); 

boolean isAdd- super.exeSqlUpdate (strSql); 
return isAdd; 


public boolean modifyUserInfo (String webID) 


1 


strSql- "update users set"; 
strSql=strSql+" userName="+"'"+userNamet "',"; 
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strSql=strSql+" email="+"'""+email+ yy 7 
strSql=strSql+" sex="+"""+sext"","7 
strSql=strSql+" identityID="+"'"+ identityID+"', "7 
strSql=strSql+" shopName="+"'"+ shopName+ "' ,"; 
strSql=strSql+" shopIntro="+"'"+ shopIntrot "',"; 
strSql-strSql*" shopper="+"'"+ shopper "',"; 
strSql- strSql*" realName- "4 "'"r realName* "',"; 
strSql=strSql+ " mainFields- "+ "'"rmainFieldst"',"; 
strSql- strSql4" telephone- "+ "'"4 telephone "',"; 
strSql=strSql+" createDate- "+ "'"4 createDatet "',"; 
strSql=strSql+" sysRole- "4 "'"4 sysRole* "',"; 
strSql=strSql+" tag- "+ "'"rtagr"'"; 
strSql=strSql+" where ID='"+webID+"'"; 
System.out.println (strSql); 
boolean isUpdate- super.exeSqlUpdate (strSql); 
return isUpdate; 

) 

public boolean updatekey (String webID,String webUserPassword) 

{ 
strSql= "update users set "; 
strSql- strSql+ "userPassword- "+ "'"4 webUserPassword+ "'"; 
strSql=strSql+" where ID- '"+webID+ "'"; 
boolean isUpdatekey- super.exeSqlUpdate (strSql); 
return isUpdatekey; 

) 

public boolean delete (String webID) 

{ 





strSql="delete from 'users' where ID='"; 
StrSql- strSql* webID- "'"; 
boolean isDeletel- super.exeSqlUpdate (strSql); 
strSql- "delete from 'goods' where issuer='"; 
strSql=strSql+webID+ "'"; 
boolean isDelete2- super.exeSqlUpdate (strSql); 
strSql- "delete from 'discussion' where authorID- '"; 
strSql=strSql+ webID+ "'"; 
boolean isDelete3- super.exeSqlUpdate (strSql) 
StrSql- "delete from 'attention' where userID- '"; 
strSql-strSql*webIDt"'"; 
boolean isDelete4- super.exeSqlUpdate (strSql); 
boolean isDelete-isDeletel&&isDelete2&&isDelete3&&isDelete4; 
return isDelete; 

) 

public boolean init (String webID) 

{ 


$ 
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strSql="select * from "users' where ID="; 
strSql=strSql+ "'"+webID+ "'"; 


try 
{ 


ResultSet rs= super.exeSqlQuery (strSql); 
if (rs.next()) 


{ 


ID=rs.getLong ("ID") + 

userName= rs .getString ("userName"); 
userPassword- rs.getString ("userPassword") ; 
realName= rs.getString("realName"); 
sex-rs.getInt ("sex"); 

identityID- rs.getString ("identityID"); 
shopName= rs.getString("shopName"); 
shopIntro-rs.getString("shopIntro"); 
email-rs.getString("email"); 

shopper= rs.getString ("shopper"); 
mainFields- rs.getLong ("mainFields"); 
telephone= rs.getString ("telephone"); 
createDate- rs.getString ("createDate") 
sysRole= rs.getInt ("sysRole"); 
tag-rs.getInt ("tag"); 

return true; 


return false; 


catch (Exception ex) 


f 


System.out.println(ex.toString()); 
return false; 


public boolean isValidUser (String webUserName, String webUserPassword, String 


webRole) 


{ 


strSq: 





"select * from 'users' "; 


strSql=strSql+" where userName- '"+ webUserName- "'"; 


strSql=strSql+" and userPassword- '"+webUserPassword+ "'"; 


strSql=strSql+" and sysRole- '"+ webRole+ "'"; 


try 
{ 
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ResultSet rs=super.exeSqlQuery (strSql) ; 

if (rs.next ()) 

{ 
ID=rs.getLong ("ID"); 
userName- rs .getString ("userName") ; 
userPassword= rs.getString("userPassword") ; 
realName=rs.getString ("realName") ; 
sex=rs.getInt ("sex"); 
identityID= rs.getString("identityID"); 
shopName- rs .getString ("shopName") ; 
shopIntro-rs.getString("shopIntro"); 
email-rs.getString ("email"); 
shopper= rs.getString ("shopper"); 
mainFields- rs.getLong ("mainFields"); 
telephone= rs.getString ("telephone"); 
createDate- rs.getString ("createDate"); 
sysRole-rs.getInt ("sysRole"); 
tag-rs.getInt ("tag"); 
return true; 


return false; 


return false; 


public boolean isExist (String webUserName) 
t 
strSql="select * from 'users' "; 
strSql- strSql*" where userName- '"+ webUserName* "'"; 
try 
{ 
ResultSet rs= super.exeSqlQuery (strSql); 
if (rs.next ()) 
{ 
return true; 
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return false; 


public boolean enable (String webID) 

{ 
strSql= "update users set tag=1 where ID- '"; 
strSql=strSql +webID+"'"; 
boolean isEnable- super.exeSqlUpdate (strSql); 
return isEnable; 

) 

public boolean disable (String webID) 

{ 
strSql= "update users set tag-- 1 where ID- '"; 
strSql=strSql+webID+ "'"; 
boolean isDisable- super.exeSqlUpdate (strSql); 
return isDisable; 

) 

public ResultSet showAllUsers () 

{ 
strSql="select * from 'users' where tag!=-1 and sysRole=1"; 
ResultSet rs=null; 
try 
{ 

rs= super .exeSqlQuery (strSql) + 


$ 

catch (Exception ex) 

{ 

System.out.println(ex.toString()); 

} 

return rs; 
) 
public ResultSet showAllMerchants (String webTag) 
t 


298 Web 项 目 开发 实践 教程 


strSql="select * from 'users' where tag- '"+ webTag+ "' and sysRole= 2 order by ID 
desc"; 
ResultSet rs=null; 
try 
{ 
rs= super .exeSqlQuery (strSql); 
} 
catch (Exception ex) 
{ 
System.out.println (ex.toString()); 
H 
return rs; 


) 


在 程序 中 对 比 sysRole 5 0,1,2 的 值 , 从 而 决定 转向 哪 一 个 用 户 的 页 面 , 如 果 在 判断 
sysRole. compareTo("0") — —0. Bl iH] sysRole 的 值 为 0, 则 系统 转向 管理 员 页 面 。 以 
下 将 详细 解释 系统 管理 员 模 块 的 功能 及 实现 。 

3. 系统 管理 员 模 块 实现 

管理 员 页 面包 含 “商店 管理 ”“ 用 户 管理 ”“ 商 品 管理 ”“ 团 购 订 单 信息 ”“ 美 食 类 别 
管理 "“ 修 改 密码 ”等 功能 ,具体 效果 如 图 9-5 所 示 。 


Blindexiop | Bi infoManagementise |E) logoutisp  [É)losicChecisp | 目 romLtoppp |j i sts} 
<P © MPO epelocaihast8080/shop/edmin/sdmin ndexjsp 








图 9-5 管理 员 登 录 主 页 面 


在 本 系统 的 操作 过 程 中 ,需要 管理 员 来 添加 美食 的 类 别 . 管 理 员 可 以 在 “美食 类 别管 
理 ” 中 添加 相应 的 美食 类 别 , 单 击 “ 添 加 ”按钮 ,如 图 9-6 所 示 。 
美食 项 目 添加 的 关键 实现 代码 如 下 (goodsFieldAddForm. jsp) : 


function chkForm() 
{ 
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E indexjsp ogredkie [BB normalen 
(p 二 图 È Htp//ocahost8000/shop/admin/admin jndexjsp 














图 9-6 ”添加 美食 项 目 


if(forml.name.value-- "")( 
alert ("请 输入 美食 项 目 名 称 ") ; 
forml .name.focus (); 


return false; 


return true; 
} 
< form name =" forml" method =" post" action =" goodsFieldAddSave. jsp" onsubmit = 
"return chkForm()"> 
<table width="90% "> 
< TBODY> 
<TR> 
<td width- "30$ " align="right"> H 44 Ff :« /td> 
<td width="70% ">< input name="name" type="text" size= 30> 
</td> 
</TR> 
<tr> 
< INPUT type= submit value= "添加 " name= Submit» 
<input type- "reset" name- "reset" value- " 重 填 "> 


由 form 的 action 属性 值 可 知 ,页 面 goodsFieldAddSave. jsp 用 来 接收 和 处 理 填 人 的 
数据 ,其 关键 代码 如 下 : 


<% 
request .setCharacterEncoding ("GB2312") ; 
goodsField.name- request .getParameter ("name") ; 
goodsField.tag-0; 
if (goodsField.add()) 
{ 


<font color-"£ 0000FF" size="5"><b> 美 食 项 目 添加 成 功 < /b>< /font> 
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<br> 

«input type=button name= closewin value= "继续 添加 "onclick= 
"javascript:window.location- 'goodsFieldAddForm.jsp'"» 
<% 


else 


&> 
<td colspan- "2" align="center">< font color= "red"><b> 美 食 项 目 添 加 失败 ,请 重 试 !< mb 
></font>< /td> 
<br> 
«input type=button name= Gobackl value= "返回 " onclick="javascript: window. 
history.go(-1)"» 
<% 


$> 


添加 完美 食 项 目 后 效果 如 图 9-7 所 示 。 
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图 9-7 ”美食 项 目 示意 


具体 代码 如 下 (allGoodsFieldList. jsp) : 


<%@page language- "java" contentType- "text/html; charset=GB2312" 
import="java.sql.* ,com.tuan. * " 

pageEncoding- "GB2312"$ > 
« jsp:useBean scope- "page" id-"goodsField" class="com.tuan.goodsField” /> 
<% 

int count=0; 

int totalPageCount=0; 

int perPageCount=5; 
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int currentPage=1; 
String pageId= request .getParameter ("page") ; 
if (pageId!=null) 
{ 
currentPage- Integer.parseInt (pageId) ; 
//out.println (pageId); 


8» 
< !DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" 
"http://www .w3.org/TR/htm14/loose.dtd"» 
«html» 
<head> 
<meta http- equiv- "Content- Type" content- "text/html; charset=GB2312"> 
<title> 吃 遍 天 下 美食 团购 网 站 < /title> 
</head> 
<body bgcolor="AOFFFF"> 
<div align=center> 
«p align="center">< font size="5"> 美 食 类 别 项 目 < /font>< /p> 
<table width- "90$ " border=0 style- "text- align:center"> 
"goodsFieldDelete.jsp" method= "post"» 
< input type=hidden name= "page" value=< $- currentPage$»» 
«tr bgcolor- "# DFDFDF"> 
«td align="center">< font size- "4"> 美 食 类 < /font» « /td> 
«td align="center">< font size= "4"> 操 作 < /font>< /td> 
«td align="center">< font size= "4"> 删 除 </font>< /td> 


< form name- "£orml" actioi 





</tr> 
<% 
ResultSet rs=goodsField.showAllFields (); 
rs.last ();// 移 到 末尾 
count=rs.getRow();// 取 得 总 查询 数 
totalPageCount- (count+ perPageCount - 1) /perPageCount; 
if(currentPage» totalPageCount || currentPage<=0) 
{ 
current Page= 1; 
H 
int currentIndex- (currentPage -1) * perPageCount+1; 
if(count» 0) 
{ 
rs.absolute (currentIndex) 
> 
«tr» 
<td> &nbsp;« $- rs.getString ("name") %>< /td> 
<td> &nbsp;« a href- goodsFieldModifyForm.jsp? ID- « $=rs.getLong("ID")% 
>target=_self> 修 改 < /a>< /td» 
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<td align=center> 
«input type=checkbox name-deleteID value=<%=rs.getLong ("ID")% >> 
</td> 
</tr> 
«t 
int i-1; 
while (rs.next()) 
t 
5» 
«tr» 
«td» &nbsp;« $— rs.getString("name")$»« /td> 
< td> &nbsp; < a href= goodsFieldModifyForm. jsp? ID= <$% = rs. 
getLong ("ID")%$>target=_self> 修 改 < /a>< /td> 
<td align= center> < input type= checkbox name= deleteID 
value=<%=rs.getLong ("ID") $ »» « /td> 
</tr> 
<% 
i++; 
if(i» perPageCount- 1) break; 


> 
<tr> 
<td colspan=5 align=center><br> 
«input type- submit name- delete value= 删 除 所 选项 目 > 
</td> 
</tr> 
</table> 
<br> 
<table width= "90$" border- 0» 
«tr align="right" valign="top"> 
<td colspan="4" align="right"> 
<% 
String firstLink, lastLink,preLink, nextLink; 
firstLink="allGoodsFieldList.jsp? page=1"; 
lastLink- "allGoodsFieldList.jsp?page- "+ totalPageCount; 
if(currentPage» 1) 
t 
preLink- "allGoodsFieldList.jsp? page= "+ (currentPage- 1); 
i 
else 


{ 
prelink-firstLink; 
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if (currentPage <=totalPageCount- 1) 
t 
nextLink- "allGoodsFieldList.jsp?page- "+ (currentPage* 1); 

) 

else 

{ 

nextLink= lastLink; 
} 
s» 
< form method="post" action= "allGoodsFieldList.jsp"» 

<p align=center> Jt < font color="# 0000FF"» <%= count $ » « /font» # 第 < font 
color="# 0000FF"» <% = currentPage % > </font> 页 / 共 < font color="# 0000FF" > <% = 
totalPageCount %></font> HM | <a href=<% = firstLink$ > > 首页 </a> | <a href=<%= 
preLinkt >> 上 一 页 </a> | <a href= <$ =nextLinkt > > 下 一 页 </a> | «a href=<%= 
lastLink% >> 尾 页 < /a> | 转 到 

<input type="text" name=page size=2><input type="submit" name= submit value 

=GO>< /p> 

</form> 

</td> 

</tr> 

</table> 
</div> 
< /body» 
« /htnl» 


在 程序 中 涉及 了 分 页 的 操作 ,要 把 页 面 显示 方式 设计 成 这 样 的 方式 ,通常 需要 用 到 这 
几 个 基本 要 素 : 每 个 页 面 所 显示 的 记录 数 、 一 共有 多 少 个 页 面 、 目 前 显示 第 几 页 以 及 总 的 
记录 数 。 具 体 思路 是 : 如 果 要 显示 哪个 页 面 ,就 要 先 算出 来 每 个 页 面 第 一 条 记录 是 所 有 
记录 中 的 第 几 条 记录 ,假设 每 页 的 第 一 条 记录 是 总 记录 中 的 第 position 条 记录 ,那么 
position=(ShowPage—1) XPageSize 十 1。 例 如 ,每 页 显示 三 条 记录 ,如 果 要 显示 第 一 页 ， 
就 要 计算 出 第 一 页 中 的 第 一 条 记录 是 总 的 记录 中 的 第 一 条 记录 ;如 果 要 显示 第 二 页 ,就 要 
计算 出 第 二 页 中 的 第 一 条 记录 是 总 的 记录 中 的 第 四 条 记录 ;如 果 要 显示 第 三 页 ,就 要 计算 
出 第 一 页 中 的 第 一 条 记录 是 总 的 记录 中 的 第 九条 记录 。 以 此 类 推 。 

4. 商家 模块 实现 

一 旦 管理 员 设 定好 美食 项 目 ,商家 就 可 以 针对 各 个 美食 项 目 建立 各 自 的 商店 ,商家 的 
注册 页 面 如 图 9-8 所 示 。 

输 完 用 户 名 后 单 击 * 下 一 步 ?按钮 即 可 以 到 详细 信息 输入 界面 。 本 步骤 中 的 经 营 项 目 
只 能 选择 管理 员 添 加 过 的 项 目 .效果 如 图 9-9 所 示 。 

其 中 “经 营 项 目 ” 的 关键 代码 如 下 : 


<TD width="20%" align=right vAlign=top> 经 营 项 目 :</TD> 
<TD width= "80$ " align=left> 
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oo 大 | ME 





请 小 择 用 户 兴 型 © HEAP * 5x 





图 9-8 商家 注册 页 面 











图 9-9 商家 注册 详细 信息 


<select style- "WIDTH: 150px" id-mainFields name= "mainFields"> 
<% 
ResultSet rs=goodsField.showAllFields (); 

while (rs.next()) 

{ 
> 

<option value=< %=rs.getLong ("ID") % >><%=rs.getString ("name") % >< /option> 

<% 
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其 余 页 面 代码 请 读者 自行 完成 。 
商家 填 完 详细 信息 需 等 待 管理 员 审 核 后 才能 生效 ,具体 效果 如 图 9-10 和 图 9-11 
所 示 。 


‘Blindexisp [BinfoMenagemertisp [Icgoutisp [lcgnCheckisp [rormal toniep ER mu 





4p ISP hitpy/localbost 8000/shapfindexisp - 








H8. em ok 
联系 电话 ， 13712345566 
身价 证 号 码 。 e60520199202220112 
ETAPP 210126. con 





E 





图 9-10 详细 信息 填写 页 面 





注册 成 功 ， 但 必须 经 过 管理 员 审批 后 才能 发 布 商品 ! 
e 


图 9-11 注册 成 功 


关键 实现 代码 如 下 : 


jsp:useBean scope- "page" id- "user" class- "com.tuan.user" /> 
<% 
request.setCharacterEncoding ("GB2312") ; 
user.userName- request.getParameter ("userName") ; 
user.userPassword- request.getParameter ("userPassword") ; 
user.email- request.getParameter ("email"); 
user.sex- Integer .parseInt (request.getParameter ("sex") ) ; 
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user.identityID- request .getParameter ("identityID") ; 
user.shopName- request .get Parameter ("shopName") ; 
user.shopIntro= request .getParameter ("shopIntro"); 
user.shopper- request .getParameter ("shopper") ; 
user. realName= request .getParameter ("realName") ; 
user.telephone- request .getParameter ("telephone") ; 
user. sysRole=2; 
user.tag-0; 
SimpleDateFormat dateFormatter- new SimpleDateFormat ("yyyy- MM- dd") ; 
user.createDate- dateFormatter.format (new java.util.Date()); 
user.mainFields- Long.parseLong (request .getParameter ("mainFields")); 
boolean isAdd-user.add(); 
if (isAdd) 
{ 
&> 
<br><br><br><br> 
<p align=center> 
<font size=5 color=blue> 
<b> 注 册 成 功 ,但 必须 经 过 管理 员 审批 后 才能 发 布 商品 !< /b> 
</font> 
</p> 
<p align=center> 
«input type=button name=btnlogin value= 5% onclick- "javascript: 
window. location= 'userLogin.jsp'"> 
</p> 
<$% 
} 


此 时 可 以 以 管理 员 的 身份 再 次 登录 系统 ,在 首页 就 可 以 看 到 未 审批 店铺 的 信息 , 若 店 
铺 信息 合格 , 则 管理 员 可 以 选择 审批 通过 ;车 店铺 信息 不 合格 , 则 可 以 通过 “发 邮件 ”通知 
申请 者 。 效 果 图 如 图 9-12 和 图 9-13 所 示 。 





未 审批 店铺 信息 





mum 选择 店名 店主 经营 项 目 
" E z BOR E 
Sad 


图 9-12 ”店铺 审批 页 面 
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Eius = 


图 9-13 审批 成 功 页 面 


实现 关键 代码 如 下 : 


« jsp:useBean scope= "page" id= "user" class= "com.tuan.user" /> 
« jsp:useBean scope- "page" id= "executeWay" class- "com.tuan.executeWay" /> 
«p align- "center"» « font size="5"> 未 审批 店铺 信息 </font>< /p> 
< form name= forml action-merchantAdmit.jsp method- post» 
<table width- "90$ " border- 0 style- "text- align:center"» 
<tr bgcolor= "# DFDFDF"> 
<td align="center" width= "15$ ">< font size="4"> 选 择 < /font>< /td> 
<td align="center" width= "30$ ">< font size="4"> Jl 4 </font> « /td> 
<td align="center" width= "20$ ">< font size="4"> Jl < /font>< /td> 
<td align="center” width- "20$ ">< font size="4"> 经 营 项 目 < /font>< /td» 
</tr> 
<% 
ResultSet rs=user.showAllMerchants ("0' 
while (rs.next ()) 
{ 





String strSqll- "select name from goodsField where ID- '"4rs. 
getLong ("mainFields")4 "'"; 
ResultSet rsl-executeWay.exeSqlQuery (strSqll); 
rsl.first(); 
> 
<tr> 
<td align="center"> < input type= checkbox name=admitID value= 
«$&-rs.getLong("ID")$»»« /td> 
<td> &nbsp;« $=rs.getString ("shopName")$ >< /td> 
<td> &nbsp;« $=rs.getString ("shopper") % >< /td> 
<td> &nbsp;« $=rs1.getString ("name") %>< /td> 
<td> &nbsp;« a href='../sendMail.jsp? receiver=<%=rs. 
getString ("userName")%>' target="”_ self"> 发 邮件 </a></td> 
</tr> 
<% 
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$> 

</table> 

<p align=center>< input type=submit name=pass value= "审批 通过 "> « /p> 
</form 


审批 通过 以 后 ,商家 就 可 以 进行 登录 并 在 商店 中 发 布 商品 了 ,在 “商品 管理 "模块 中 ， 
管理 员 可 以 发 布 相 应 的 美食 ,并 对 美食 进行 介绍 、 上 传 图 片 等 操作 。 如 图 9-14 和 图 9-15 
所 示 。 


(B indexisp [BinfoMenegementjsp E legoutisp [È loginCheckisp_ [E normal topisp (AERTS IRE SI =o 





{P< Mg hitpr//locathost8080/shop/merchant/merchent indexjsp -» Hu 








RARE sizs | 
iex) 


图 9-14 商家 发 布 美食 





美食 发 布 成 功 ! 











已 发 市 美食 = 
9-15 ”发布 成 功 页 面 
其 关键 代码 如 下 : 


«SCRIPT language- javascript» 
<!-- 

function isReUpload_onclick() 
{ 
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if(forml.isReUpload[0] .checked) // 不 传 
$ 

forml.file.disabled-true; 
} 
if (forml .isReUpload[1] .checked) // 上 传 
{ 

forml.file.value=""; 

forml.file.disabled- false; 


} 
</SCRIPT> 
<jsp:useBean scope- "page" id= "goodsField" class= "com.tuan.goodsField" /> 
<% 
String strGoodsID- ((com.tuan.user)session.getAttribute ("user") ). 
mainFields+ 
goodsField.init (strGoodsID) ; 





$> 
<FORM name- "forml" onreset- "return confirm ("Wi 9E jfi Z5 MR G? ');" 
onsubmit =" return infocheck ( );" action =" goodsAddSave. jsp" method = 
"post" enctype- "multipart/form- data"» 


<TR 
<TD align=right width="17% "> 美食 名 称 :</TD> 
<TD align=left width- "83$ "> 
<input type- "text" name- "title" size="30"> 
</TD> 
</TR> 
<TR> 


<TD vAlign=top align=right> 是 否 上 传 图 片 :< /TD> 
< TD align- left > < input type="radio" checked = true value= 0 name = 
"isReUpload" LANGUAGE- javascript onclick="return isReUpload_onclick()"> 
"8 
<input type="radio" value=1 name= "isReUpload"  LANGUAGE- javascript onclick- " 
return isReUpload onclick()"> 是 </TD> 
</TR> 
<TR> 
<TD vAlign=top align=right> #4 PAH :« /TD> 
<TD align=left>< input type= "file" disabled- true name= "file">< /TD> 
</TR> 


«TR 
<TD colSpan-2» 
< INPUT type= submit value= "ff ff" name= submit» &nbsp; &nbsp; &nbsp; 
&nbsp;« INPUT type- reset value- "Hi 填 " name= reset» « /TD> 
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</TR> 
</FORM> 
5. 普通 用 户 模块 的 实现 


普通 用 户 注 册 需 要 用 户 输入 用 户 名 密码 、 性 别 和 电子 邮箱 ,读者 可 以 根据 需要 对 注 
册 信 息 做 相应 的 修改 ,页 面 如 图 9-16 一 图 9-18 所 示 。 





WARAPA è 首 通用 户 


请 设 定 用 记名 ， Test] i=) 





图 9-16 设 定 用 户 名 




















图 9-17 详细 信息 输入 页 面 


本 部 分 注册 代码 读者 可 以 参照 商家 模块 的 注册 代码 自行 完成 。 注 册 成 功 后 ,用 户 登 
录 就 可 以 看 到 所 有 的 美食 .如 图 9-19 和 图 9-20 所 示 。 

该 功能 只 需要 连接 数据 库 并 从 数据 库 中 取出 相应 的 值 并 显示 在 页 面 上 ,相关 实现 代 
码 读者 可 以 自行 完成 。 

在 用 户 登录 的 主页 面 上 还 有 “查询 ”功能 ,用 户 可 以 根据 美食 类 别 、 美 食 名称 、 价 格 查 
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图 9-18 注册 成 功 页 面 


Binderiep |E) infoManagemontjep  [Slosostkp [Ellosicheckise  (Eiremeltepio fnamn, E 
{SMP htpyfocalross80e0/chop/indenjep -E 























图 9-20 普通 用 户主 页 面 


询 相应 的 美食 ,也 可 以 根据 店铺 名 称 、 美 食 类 别 . 和 店主 查询 相应 的 店铺 ,或 者 进行 模糊 查 
询 。 具 体 界 面 实现 如 图 9-21 所 示 。 
关键 代码 如 下 : 
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Biindenisp |E infoManagementjsp |E logoutisp 
<= Mb P pyliccahes8080/snophrormal ndexisp 














SRA ws o. BRE oS 
Reet. EGO SE. 
dde. gm ~ (RIB) BE. m 
图 9-21 查询 页 面 


X form name= "forml" action= "showGoods.jsp" method= "post"> 
«font size="4"> 
查询 美食 
</font><br> 
<tr> 
<td width="40%" align="right"> % RX Hill :« /td> 
<td width= "60%" align="left"> 
<select name="goodsField"> 
<option value="0" selected> 请 选择 < /option> 
<% 
ResultSet rs=goodsField.showAllFields (); 
while (rs.next ()) 
{ 
&> 
<option value=< %=rs.getLong ("ID") % >><%=rs.getString ("name") % >< /option 


<% 


%> 
</select> 
</td> 
</tr> 
<tr> 
«td width="40%" align="right"> ft ff :« /td> 
< td width= "60$ " align="left"> < input type="text" name- "title" size=" 
30"» « /td> 
</tr> 
«tr» 
«td width- "40$ " align- "right"> 价 格 :</td> 
«td width- "60$ " align="left"> 


<select name- "tprice"» 
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<option value="0" selected> 请 选择 :< /option> 
«option value="1"> 0- - 100< /option> 
<option value= "2"> 100- - 500< /option» 
<option value= "3"> 500- - 2000< /option» 
<option value= "4"> 2000- - 5000< /option> 
<option value= "5"> 5000- - 10000< /option> 
<option value= "6"> 10000- -< /option> 
</select> (RMB) </td> 
</tr> 
<tr> 
<td colspan- "2" align="center"><br> 
«input type="submit” name- "submitl" value= "查询 "> &nbsp; &nbsp; nbsp; 
«input type- "reset" name= "reset 1" value= " 重 填 "> 
</td> 
</tr> 
< /form» 


由 form 的 action Ji PE nT Al , 单 击 “查询 按钮 以 后 数据 由 showGoods. jsp 页 面 接收 
和 处 理 ,showGoods. jsp 页 面 的 源 代 码 如 下 : 


<%@page language= "java" contentType- "text/html; charset- GB2312" 
import-"java.sql.* ,com.tuan. * " pageEncoding- "GB2312"$ > 
X jsp:useBean scope- "page" id- "executeWay" class- "com.tuan.executeWay" /> 
«t 

request.setCharacterEncoding ("GB2312") ; 

int count- 0; 

int totalPageCount- 0; 

int perPageCount- 5; 

int currentPage=1; 

String pageId- request .getParameter ("page") + 

if (pageId!=null) 

{ 
currentPage- Integer .parseInt (pageId) ; 
} 

String title=request .getParameter ("title"); 

String tprice= request .getParameter ("tprice"); 

String strGoodsField- request .getParameter ("goodsField") ; 

long goodsField=0; 

String strField=""; 

if (strGoodsField ! 

{ 





null && strGoodsField !="") 





goodsField-Long.parseLong (strGoodsField) ; 


else 
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strGoodsField="0"; 
} 
if (goodsField> 0) 
£ 
strField=" and goodsField- "+ goodsField; 
} 
String strPrice=""; 
int intPrice=0; 
if(tprice !=null) 
{ 
intPrice= Integer.parseInt (tprice) + 
} 
switch (intPrice) 
{ 
case 1: strPrice=" and tprice «100 "; 


f 


case 2: strPrice=" and tprice <=500 and tprice>100 "; 


1 


case 3: strPrice-" and tprice «- 2000 and tprice» 500 "; 


1 


case 4: strPrice-" and tprice «- 5000 and tprice> 2000 "; 


f 


case 5: strPrice=" and tprice <=10000 and tprice> 5000 "; 


1 


case 6: strPrice-" and tprice> 10000 "; 


: 


) 
if(title--null) 
{ 
title="; 
} 
title=title.trim(); 
String strSql="select * from goods where title like '%"+title+"% '"+strPrice+" "+ 
strField; 
i» 
<html> 
<head> 
<meta http- equiv- "Content- Type" content= "text/html; charset=GB2312"> 
<title> 吃 遍 天 下 美食 团购 网 站 < /title> 
</head> 
<body bgcolor= "A0FFFE"» 
«div align-center» 
«p align- "center"»« font size="5"> 最 新 团购 信息 < /font>< /p> 
<table width- "90$ " style= "text- align:center"» 
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«tr bgcolor="# DFDFDF"> 
<td align="center">< font size= "4"> 美 食 类 别 < /font>< /td> 
«td align="center">< font size= "4"> 美 食 名 称 < /font» « /td> 
«td align="center">< font size= "4"> 市 场 价格 < /£ont» « /td> 
«td align="center">< font size= "4"> 团 购 价格 < /£ont» « /td> 
<td align="center">< font size= "4"> 所 属 店铺 < /font>< /td> 
<td align="center">< font size= "4"> 发 布 时 间 < /font>< /td> 
</tr> 
<% 
ResultSet rs=executeWay.exeSqlQuery (strSql); 
rs.last ()?// 移 到 末尾 
count=rs.getRow();// 取 得 总 查询 数 
totalPageCount= (count+ perPageCount - 1) /perPageCount; 
if (currentPage>totalPageCount || currentPage<=0) 
{ 
currentPage-1; 
) 
int currentIndex- (currentPage -1) * perPageCount+1; 
if(count» 0) 
{ 
rs.absolute (current Index) ; 
String strSqll="select name from goodsField where ID= '"+ rs. getLong (" 
goodsField”)+"'"; 
String strSql2="select * from users where ID= '"+ rs. getLong 
("issuer")*"'"; 
ResultSet rsl-executeWay.exeSqlQuery (strSqll); 
ResultSet rs2=executeWay.exeSqlQuery (strSql2); 
rsl.first(); 
rs2.first(); 
> 
<tr> 
<td> &nbsp;« %=rs1.getString ("name") % >< /td> 
«td» &nbsp;« a href= goodsShow. jsp? ID=<%=rs.getLong ("ID") % > target=_ 
blank» <%=rs.getString ("title") %>< /a>< /td» 
<td> &nbsp;« =rs.getLong("price")%>< /td» 
<td> &nbsp;« $=rs.getLong("tprice")%>< /td> 
«td» &nbsp;« $= rs2.getString ("shopName") % ></td> 
<td> &nbsp;« %=rs.getString("createDate") % >< /td» « /td> 
</tr> 
<% 
int i=1; 
while (rs.next ()) 
{ 
strSqll- "select name from goodsField where ID='"+rs. 
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getLong ("goodsField")4 "'"; 


strSql2="select * from users where ID= '"4rs.getLong 


("issuer") "'"; 


rsl-executeWay.exeSqlQuery (strSq11) + 
rs2=executeWay.exeSqlQuery (strSq12) + 
rsl.first(); 
rs2.first(); 

$> 

<tr> 

«td» &nbsp;« $—- rsl.getString("name")$»« /td» 
<td> &nbsp;« a href- goodsShow. jsp? ID- « $  rs.getLong 


("ID")$»target- blank»«$-rs.getString("title")$5«/a»« /td» 


<br> 


<td> &nbsp;« $=rs.getLong ("price") % >< /td> 
<td> &nbsp;« $=rs.getLong("tprice")% ></td> 
<td> &nbsp;« $ - r32.getString("shopName")$ >< /td> 
«td» &nbsp;« $ 2 rs.getString("createDate")$»« /td> 
</tr> 
<% 


if(i> perPageCount- 1) break; 


</td> 


</tr> 


</table> 


<table width= "90%" border=0> 


<TR height="20"> 

<TD width-"25$"  height- "20" align="center" valign="top"> 
共 < font color="# 0000FF"><%=count %>< /font> 条 

第 < font color="# 0000FF"><%=currentPage %>< /font> 页 / 共 
<font color- "# 0000FF"><%=totalPageCount %>< /font> 页 
</TD> 

<TD width="10%" height="20" align="center" valign="top"> 
< form name- "forml" action- "showGoods.jsp" method= "post"> 
<input type="hidden" name= "title" value="<%=title%>"> 
«input type="hidden" name- "price" value="< $- intPrice$>"> 
<input type="hidden" name- "goodsField" value- "« $- strGoodsFields > "> 
«input type- "hidden" name- "page" value- "1"» 

«input type- "submit" name- "subl" value- "首页 "> 

«/form» 

</TD> 

<TD width="10%" height="20" align="center" valign="top"> 
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< form name= "form2" action= "showGoods.jsp" method= "post"> 
«input type="hidden" name- "title" value-"« $-title&» "> 








«input type="hidden” name= "price" value="< $= intPrice$»"» 
<input type="hidden" name- "goodsField" value- "« % = strGoodsField% >"> 
«input type="hidden" name= "page" value= "«$- currentPage- 1$» "» 
«input type- "submit" name- "sub2" value= "上 一 页 "> 
«/form» 
</TD> 
«TD width-"10$" height="20" align="center" valign="top"> 
< form name= "form3" action= "showGoods.jsp" method= "post"» 
«input type="hidden” name= "title" value="<%=title%>"> 
«input type="hidden” name= "price" value= "< $- intPrice$» "» 
«input type="hidden” name- "goodsField" value- "« $= strGoodsField$ >"> 
«input type="hidden" name= "page" value= "< $- currentPage* 1$» "» 
«input type- "submit" name- "sub3" value- "下 一 页 "> 
</form> 
</TD> 
<TD width-"10$"  height- "20" align="center” valign="top"> 
<form name- "form4" action= "showGoods.jsp" method= "post"> 
<input type="hidden" name- "title" value="<%=title% >"> 
<input type="hidden" name= "price" value= "< $= intPrice% >"> 
<input type="hidden" name= "goodsField" value= "« % = strGoodsField’ >"> 
<input type="hidden" name= "page" value= "< %=totalPageCount% >"> 
<input type="submit” name= "sub4" value- "J£ Ji "> 
«/form» 
</TD> 
<TD width="20%" height- "20" valign="top" align="center"> 
<form name- "form5" action= "showGoods.jsp" method= "post"> 
<input type="hidden" name- "title" value="<%=title% >"> 
<input type="hidden" name= "price" value= "< $= intPrices >"> 
«input type="hidden" name- "goodsField" value= "« $= strGoodsField’ >"> 
到 第 < input type="text" name= "page" size="3"> Hi &nbsp; 
<input type="submit" name- "sub5" value= "GO"> 
«/form» 
</TD> 
</TR> 
</table> 
</div> 
</body> 
</html> 


在 普通 用 户主 页 面 ( 见 图 9-22) rp , 单 击 相应 的 美食 名 称 即 可 以 弹出 图 9-23 所 示 的 窗 
口 ,在 此 窗口 中 可 以 查看 美食 商品 所 有 的 详细 信息 ,并 可 以 对 该 美食 商品 发 表 留 言 。 
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图 9-22 普通 用 户主 页 面 
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图 9-23 详细 信息 及 留言 窗口 


关键 实现 代码 如 下 : 


<jsp:useBean scope- "page" id= "goodsField" class- "com.tuan.goodsField" /> 
« jsp:useBean scope- "page" id= "goods" class- "com.tuan.goods" /> 
«X jsp:useBean scope- "page" id- "user" class- "com.tuan.user" /> 
<jsp:useBean scope- "page" id- "executeWay" class- "com.tuan.executeWay" /> 
<% 

String strID= request .getParameter ("ID") + 

goods. init (strID); 

goodsField. init (goods.goodsField+"") ; 

user. init (String.valueOf (goods. issuer) ) 7 
> 
<body bgcolor="AOFFFF"> 
<div align="center"> 

<% 
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if (goods .goodsURL.indexOf (".")>0) 
{ 
$» 
«p align="center"> 
«a href=showPhoto.jsp? photo=< % = goods .goodsURL$ > target=_self> 
<img width= "200" height- "150" src=". /uploadPhotos/< %=goods.goodsURL’ >" border=" 
o" 
</a> 
</p> 
<% 
} 
&> 
<TABLE cellSpacing-1 cellPadding= 3 width="90%" align=center border=0> 
« TBODY» 
«tr» 
<td align=right width= "40$ "> 美食 名 :< /td» 
<td align=left width- "60$ ">< %=goods.title% ></td> 
</tr> 
<tr> 
«td align= right> 美 食 类 别 :< /td> 
<td align- left><%=goodsField.name% > 
</td></tr> 
<tr> 
<td align= right> 所 属 店铺 :< /td> 
<td align=left> < %=user.shopName% > 
</td></tr> 
<tr> 
<td vAlign=top align=right> 3 ft St} :« /td> 
<td align=left><textarea name- description rows- 6 id- "descriptions" style=" 
WIDTH: 233px">< %=goods.description’ >< /textarea>< /td> 
</tr> 
«tr» 
«td vAlign-top align= right> 市 场 价格 :< /td> 
<td align- left> < font color= "# 0000FF"> < 名 =goods.price% ></font> RMB (单位 : 
元 ) &nbsp;&nbsp; 
</tr> 
<tr> 
<td valign=top align=right> 团 购 价格 :< /td> 
«td align=left>< font color="# 0000FF"> <% =goods.tprice’ >< /font> RMB (单位 : 
元 ) &nbsp;&nbsp; 
</tr> 
<tr> 
«td vAlign=top align=right> 联 系 人 :</td> 
«td align= left><%=goods.linkMan% >< /td>< /tr> 
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«tr» 
«td vAlign=top align- right> 联 系 电话 :< /td> 
<td align= left><%=goods.telephone% >< /td>< /tr> 
<tr> 
«td vAlign-top align=center colspan-2» 
«input type=button name- attention value=" 团 购 此 美食 " onclick= 
"javascript :window.location= 'buySave.jsp? ID- « $- strID$» '"» 
</td> 
</tr> 
</TABLE> 
<br> 
<% 
String strSql="select * from 'discussion' where tag!= 
'"+ strID+"' order by createDate desc"; 





1 and goodsID= 


ResultSet rs=executeWay.exeSqlQuery (strSql); 
while (rs.next ()) 
{ 


$> 
<table cellSpacing-1 cellPadding= 3 width= "90% " align=center 
border-0» 
«tr» 
<td width= "40$ " vAlign=top align- right» « span» X È A :« /span» « /td» 
<td width- "60$ "align= left» < $= rs.getString("authorName") $»« /td> 
</tr> 
«tr» 
<td width= "40$ " vAlign=top align-right»« span» 4 XI [B] :< /span» « /td> 
<td width- "60$ "align= left» «$- rs.getString("createDate") $»« /td> 
</tr> 
«tr» 
<td width= "40$ " vAlign=top align=right> « span» 留言 内 容 :< /span» « /td> 
<td width= "60$ "align= left» &nbsp;« $ — rs.getString ("content") $»« /td» 
</tr> 
</table> 
<%}%> 


< form name= forml method= "post" action= "discussionSave.jsp"> 
<table cellSpacing-1 cellPadding-3 width-"90$" align=center border=0> 
<input type=hidden name= "goodsID" value=<%=strID%>> 
«tr» 
«td width- "20$ " vAlign=top align- right» « span» X Ñ A :« /span>< /td» 
<td width= "80$" align=left> 
«input type- "text" name- "authorName" 
<% 
com.tuan.user user2- (com.tuan.user) session.getAttribute ("user"); 


if(user2 !=null) 
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out.println(" value= "+user2.userNamet+ " readonly=true");$>> 
</td> 
</tr> 
«tr» 
< td width-" 40$" vAlign- top align= right» < span» </span> 留言 内 容 : 
< /span» « /td> 
«td width- "60$" align= left» < TEXTAREA name- "content" rows- 6 cols- 40» «/ 
TEXTAREA> < /td> 
</tr> 
</table> 
<p align=center> < input type="submit" name= submit] value- "A ">< /p> 
</form 
<br> 
<p align=center> 
<input type=button name=closewin onclick= "javascript :window.close ()" value=" 
闭 窗口 ">< /p>< /div> 
< /body» 


同 理 , 在 商店 信息 模块 中 可 以 显示 所 有 商店 的 名 称 ( 见 图 9-24), 当 用 户 单 击 相应 的 
商店 名 称 时 就 会 弹出 图 9-25 所 示 的 页 面 ,其 实现 代码 读者 可 以 参照 "商品 信息 ?模块 部 分 
代码 自行 完成 。 
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图 9-24 商店 信息 主页 面 


用 户 单 击 “ 个 人 管理 ”可 以 查看 “我 的 团购 ”“ 留 言 记录 ”以 及 进行 “修改 密码 ”等 操作 。 
其 中 “我 的 团购 ”页 面 如 图 9-26 所 示 .关键 代码 如 下 : 


<p align="center">< font size="5"> 已 团购 美食 < /font>< /p> 
< form name= forml method=post target- self id= forml onsubmit- "checkDel.()"» 
<table width= 90% border=0> 
«tr bgcolor= "# DFDFDF"> 
«td align= center>< font size="4"> 选 择 </font></td> 
<td align=center>< font size= "4"> 美 食 名 称 < /font>< /td> 
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9-25 商店 详细 信息 
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图 9-26 已 团购 页 面 


<td align=center>< font size= "4"> 美 食 类 别 < /font>< /td> 
<td align=center>< font size= "4"> 所 属 店铺 < /font>< /td> 
</tr> 
<% 
String strID= ((com.tuan.user) session.getAttribute ("user") ) .ID+""; 
ResultSet rs-buy.showAllbuys (strID) ; 
while (rs.next()) 


{ 
String strSql=" select g. title, gf. name, u. shopName from goods g, 


goodsField gf, users u where g. goodsField= gf. ID and g. issuer- u. ID and g. ID- "+ rs. 


getLong("goodsID") ; 


ResultSet rsl=executeWay.exeSqlQuery (strSql); 
if(rsl.next()) 
t 
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<tr align=center> 
<td> 
«input type=checkbox name=selAttention value=<%=rs.getLong("ID")%>> 
</td> 
<td> 
<a href=goodsShow.jsp? ID=<%=rs.getLong ("ID") % > target=_blank> 
<%=rsl.getString("g.title")%> 
</a> 
</td> 
«td» 
<%=rsl.getString ("gf.name")%> 
</td> 
«td» 
«$- rs1.getString("u.shopName")$ > 
«/td» 
</tr> 
<% 


%> 
</table> 
<input type=submit name= submit value= 删 除 > 
«/form» 


“留言 记录 ”的 关键 代码 如 下 : 


<body bgcolor= "A0FFFF"» 
X jsp:useBean id= "discussion" scope= "page" class= "com.tuan.discussion"/> 
<jsp:useBean id= "executeWay" scope- "page" class= "com.tuan.executeWay"/> 
« jsp:useBean id= "goods" scope- "page" class= "com.tuan.goods"/» 
<div align=center> 
«p align="center">< font size="5"> 所 发 布 留言 </font>< /p> 
< form name= forml method=post target- self id- forml onsubmit="checkDel () "> 
<table width= 90% border= 0» 
<tr bgcolor= "# DFDFDF"> 
«td align=center>< font size- "4"> 选 择 </font>< /td> 
«td align=center>< font size="4"> 留 言 内 容 < /font>< /td> 
<td align=center>< font size="4"> 商 品 对 象 < /font>< /td> 
«td align=center>< font size="4"> 留 言 时 间 < /font></td> 
</tr> 
<% 
String strID- ((com.tuan.user) session.getAttribute ("user") ) .ID+""; 
ResultSet rs=discussion.showDiscussions (strID); 
while (rs.next ()) 
i 
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$> 
</table> 


goods .init (rs.getString ("goodsID")); 


<tr align=center> 
«td» 

«input type- checkbox name=selDiscussion value=<%=rs.getLong("ID")%>> 
</td> 

«td» 

<%=rs.getString ("content")%> 

</td> 

«td» 

<a href-goodsShow.jsp? ID=<%=rs.getLong ("ID") % > target- blank» 
<%=goods. title’ > 

</a> 

</td> 

«td» 

<%=rs.getString("createDate")%> 

</td> 

</tr> 


«input type=submit name= submit value= fi BR> 


«/form» 


“留言 记录 ”中 涉及 的 JavaBean 





discussion. java 的 代码 如 下 : 


package com.tuan; 

import java.sql.* ; 

import java.text. * ; 

public class discussion extends executeWay 


{ 


public long ID; 

public long goodsID; 
public long authorID; 
public String authorName; 
public String content; 


public String createDate; 
public int disType; 
public int tag; 

private String strSql; 


private SimpleDateFormat dateFormatter; 
public discussion() 


t 


super () 7 


} 
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dateFormatter-new SimpleDateFormat ("yyyy- MM- dd") ; 
ID-0; 





content=""; 


authorID= 0; 

createDate=dateFormatter. format (new java.util.Date ()); 
disType=1; 

tag= 07 
strSql= 





public boolean add() 


{ 


} 


strSql= "insert into discussion "; 
strSql-strSql*"("; 

strSql- strSql* "goodsID, "; 

strSql- strSql* "authorID, "; 
strSql- strSql* "authorName, "; 
strSql- strSql* "content, "; 
strSql=strSql+ "createDate,"; 
strSql=strSql+ "disType, "+ 
strSql=strSql+ "tag"; 
strSql=strSql+") "7 
strSql=strSql+ "values ("; 
strSql=strSql+"'"+ goodsID+ "',"; 
strSql=strSql+"'"+ authorID* "',"; 
strSql=strSql+" 
strSql=strSql+" 
strSql=strSql+"'"+ createDatet"',"; 
strSql=strSql+"'"+disTypet+"', "+ 
strSql=strSql+ "'"+tag+ "'"; 
strSql=strSql+")"; 

boolean isAdd- super.exeSqlUpdate (strSql) 
return isAdd; 





+ authorName+ 





*contentt "',"; 





public boolean delete (String webID) 


{ 


} 





strSql= "delete from 'discussion' where ID- '"; 
strSql-strSql*webIDt"'"; 
boolean isDelete- super.exeSqlUpdate (strSql); 


return isDelete; 


public boolean init (String webID) 
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strSql="select * from 'discussion' where ID="; 
strSql-strSql* "'"*webIDt"'"; 
try 
t 
ResultSet rs- super.exeSqlQuery (strSql); 
if (rs.next()) 
{ 
ID-rs.getLong("ID"); 
goodsID- rs.getLong ("goodsID") ; 
authorID- rs.getLong ("authorID"); 
authorName- rs.getString ("authorName") ; 
content- rs.getString ("content"); 
createDate- rs.getString ("createDate"); 
disType- rs.getInt ("disType"); 
tag-rs.getInt ("tag"); 
return true; 


catch (Exception ex) 

{ 
System.out .println (ex.toString())7 
return false; 


} 
public ResultSet showDiscussions (String authorID) 
{ 

strSql="select * from 'discussion' where tag!- - 1 and authorID- '"+ 

authorID+ "'"; 

ResultSet rs-null; 

try 

{ 

rs=super.exeSqlQuery (strSql); 


} 
catch (Exception ex) 
Í 
System.out.println (ex.toString()); 
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return rs; 
} 
public ResultSet showAllDiscussions() 
{ 
strSql="select * from 'discussion' where tag!-- 1"; 
ResultSet rs-null; 
try 
t 
rs-super.exeSqlQuery (strSql); 


} 
catch (Exception ex) 
{ 
System.out.println(ex.toString()); 


return rs; 


} 
“修改 密码 "页面 如 图 9-27 所 示 o 


国 shewGoods jsp — | [S] coodsShow jsp 












































图 9-27 修改 密码 页 面 


关键 实现 代码 如 下 : 


<SCRIPT language= javascript> 
aes 
function checkform() 
{ 
if (FORML .txtoldpasswd.value=="") 
{ 
alert (" 旧 密 码 不 能 为 空 ." ); 
FORMI .txtoldpasswd. focus () ; 
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return false; 
} 
if (FORM1.txtnewpasswd.value=="") 
{ 
alert ("新 密码 不 能 为 空 ." ); 
FORMI .txtnewpasswd. focus () 
return false; 
} 
if (FORMI.txtnewpasswd.value!- FORMI .txtcfpasswd.value) 
t 
alert ("两 次 输入 密码 不 一 致 ." ); 
FORM] .txtnewpasswd.focus (); 
return false; 
} 
return true ; 
) 
//--> 
</SCRIPT> 
< form name = FORM] method = post action = modifyPasswordSave. jsp onSubmit = 
"return checkform()"> 
<p align=center> < font size=5> 修 改 密码 < /font>< /p> 
<tr> 
«td width=50%align=right> 旧 密码 :< /td> 
<td width=50% > 
<input name- txtoldpasswd size-23 type- password» 
</td> 
</tr> 
<tr> 
«td width= 50salign= right> 新 密码 :< /td> 
<td width- 50$» 
<input name= txtnewpasswd size-23 type- password» 
</td> 
</tr> 
<tr> 
«td width= 50salign= right> 确 认 新 密码 :< /td> 
<td width= 50$» 
<input name=txtcfpasswd size=23 type=password> 
</td> 
</tr> 
«tr» 
«td colspan-2» «p align=center> 
«input name= submit type=submit value= 修 改 > 
«input name- reset type= reset value- 8 Hb» 
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modifyPasswordSave.jsp 的 关键 代码 如 下 : 
<body bgcolor= "ROFFFF"> 
« jsp:useBean id- "user" scope- "page" class= "com.tuan.user"/» 
«center» 
<% 
String strID= String. valueOf ( ( (com. tuan. user) session. getAttribute ("user") ) . 
ID); 
user.init (strID); 
if (0==user.userPassword.compareTb (request.getParameter("txtoldpasswd"))) 
{ 
String strUserpassword- request .getParameter ("txtnewpasswd") ; 
if (user .updatekey (strID, strUserpassword)) 
{ 
$> 
<font color="blue" size= 4><b> 密 码 修改 成 功 !< /b>< /font> 
<br><br> 
< input type=button name= Goback value= "确定 " onclick="javascript:window. 
history.go(-1)"» 
<% 
} 
else 
{ 
&> 
<font color="red" size- 4><b> 密 码 修改 失败 ,请 稍 后 再 试 !< /b>< /font> 
<br><br> 





< input type=button name= Goback value= "返回 " onclick= "javascript: window. 
history.go(-1)"» 


<% 


} 
else 
{ 
$> 


<font color="red" size=4><b> 密 码 错误 ,请 输入 正确 旧 密 码 !< /b>< /font> 
<br><br> 
< input type= button name= Goback value=" 返 回 " onclick=" javascript: window. 
history.go(-1)"» 
<% 


委 > 


商家 和 管理 员 的 密码 管理 也 可 以 按 上 述 代 码 来 实现 。 
6. 管理 员 相 关 维 护 工作 
管理 员 可 以 对 该 购物 平台 进行 维护 ,主要 体现 在 “商店 管理 "“ 用 户 管理 "“ 商 品 管 
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理 ”“ 团 购 订单 管理 ”“ 美 食 类 别管 理 ” 等 。 

1) 商店 管理 

“商店 管理 ”包含 “添加 店铺 ”“ 审 批 店铺 ”“ 浏 览 店铺 ”等 功能 ,店铺 的 审批 和 浏览 前 
面 已 经 介绍 过 ,管理 员 添加 店铺 的 页 面 如 图 9-28 所 示 。 


E) anuseList. jsp 

























































































a) (33) 2 
图 9-28 ”添加 店铺 页 面 


页 面 表单 的 设计 读者 可 以 自行 完成 ,处 理 该 表单 内 容 的 关键 代码 如 下 : 


« jsp:useBean scope= "page" id- "user" class- "com.tuan.user" /> 
«t 
request.setCharacterEncoding ("GB2312") ; 
String strUsername- request .getParameter ("userName"); 
if(!user.isExist (strUsername)) 
t 
user.userName- strUsername; 
user.userPassword- request.getParameter ("userPassword"); 
user.email- request.getParameter ("email"); 
user.sex- Integer.parseInt (request .getParameter ("sex")) 7 
user.identityID- request .getParameter ("identityID"); 
user.shopName- request .getParameter ("shopName") ; 
user.shopIntro- request .get Parameter ("shopIntro"); 
user.shopper- request .getParameter ("shopper"); 
user.realName- request .getParameter ("realName") ; 
user.telephone- request .getParameter ("telephone") ; 
user.sysRole-2; 


user.tag=1; 
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SimpleDateFormat dateFormatter=new SimpleDateFormat ("yyyy- MM- dd") ; 


user.createDate- dateFormatter.format (new java.util.Date()); 


user .mainFields=Long.parseLong (request .getParameter ("mainFields") 





boolean isAdd-user.add(); 
if(isAdd) 


{ 


$> 

<br><br> 

<p align=center> 

<font size=5 color=blue> 
<b> 用 户 添加 成 功 < /b> 
</font> 

</p> 

<p align=center> 


«input type=button name- btnlogin value= 登 录 onclick="javascript:window. 


location- 'allMerchantList.jsp'"» 


else 


) 


i 


</p> 
<% 


%> 

<br><br> 

<p align=center> 

<font size=5 color=red> 

<b> 用 户 添加 失败 ,请 稍 后 再 试 !< /b> 
</font> 

</p> 

<p align=center> 


<input type=button name=btnlogin value= 返 回 onclick= javascript: 


window.history.go(-1)> 


<% 


s» 


</p> 


<br><br> 
<p align=center> 
<font size=5 color=red> 


<b> 该 用 户 名 已 经 存在 :</b> 
</font> 
</p> 
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<p align=center> 
«input type-button name=btnlogin value= 返 回 onclick- javascript: 
window.history.go (-1)» 


</p> 
<% 
} 
8» 
2) 用 户 管理 
用 户 管理 模块 分 为 两 个 功能 : 一 个 是 “添加 用 户 ”, 另 一 个 是 用户 管理 ”, 管 理 员 可 以 
手动 添加 用 户 ,具体 实 现 界面 如 图 9-29 所 示 。 


Bindexjsp  [ElieMenegementisp  [Ellegoutise [上 loginCheckisp |B normal toniep [EER =y 
GPS WP http//ecolnost:80W0/chop/admin/admin indoxjsp. ->E 

















(Em) — (85) 











9-29 添加 用 户 页 面 


具体 代码 读者 可 以 参考 “添加 店铺 ”模块 的 代码 自行 实现 。 
“浏览 用 户 ” 可 以 展示 所 有 用 户 的 列表 ,并 可 以 删除 某 一 普通 用 户 , 具 体 实现 效果 如 
图 9-30 所 示 。 


E nodifyPasswordSave.j | 四 werchnthdd?orn. jsp | E) merchanthddsave. jsp E allUsarList jsp | "22 aa 








http://localhost: 8080/veb/ adnin/adnin index jap 

















普通 用 户 信息 


浏览 用 户 用 户 名 an Enail 删除 
Jerry 123456 Jerry8126. com B 











Fis 第 1 页 / 共 1 页 | 首页 | 上 一 页 | 下 一 页 | 尾 页 | 苇 到 [] 回 








9-30 用 户 管理 页 面 


关键 实现 代码 如 下 : 
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< jsp:useBean scope- "page" id="goods" class="com.tuan.goods" /> 
« jsp:useBean scope- "page" id="user" class="com.tuan.user" /> 


« jsp:useBean scope- "page" id- "executeWay" class- "com.tuan.executeWay" /» 
<% 

int count=0; 

int totalPageCount=0; 

int perPageCount=5; 

int currentPage=1; 

String pageId- request .getParameter ("page") ; 

if (pageId!-null) 

t 
currentPage- Integer.parseInt (pageId); 


$> 
«p align="center">< font size="5"> 普 通用 户 信息 </font>< /p> 
<table width- "90$" border=0 style= "text- align:center"> 


< form name- "forml" action= 





userDelete.jsp" method= "post"> 
<input type=hidden name= "page" value=< %=currentPage% >> 
<input type=hidden name- "toURL" value- "allUserList.jsp"» 
<tr bgcolor= "# DFDFDF"> 
«td align="center">< font size="4"> JH P! 44 < /font>< /td» 
«td align="center">< font size="4"> 密 码 < /font>< /td» 
<td align= "center">< font size= "4"> Email< /font>< /td> 
<td align="center">< font size= "4"> 删 除 < /font>< /td> 
</tr> 
<% 
ResultSet rs=user.showAllUsers (); 
rs.last(); 
count-rs.getRow(); 
totalPageCount- (count+ perPageCount - 1) /perPageCount; 
if(currentPage» totalPageCount || currentPage« - 0) 
t 
currentPage- 1; 
H 
int currentIndex- (currentPage -1) * perPageCount 1; 
if (count> 0) 
{ 
rs.absolute (current Index) ; 
$5 
«tr» 
«td» &nbsp;« $- rs.getString ("userName") % >< /td» 
«td» &nbsp;« $= rs.getString ("userPassword")% >< /td> 
<td> &nbsp;« %=rs.getString ("email")% ></td> 
<td align=center> 
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«input type=checkbox name=deleteID value=<%=rs.getLong("ID")$>> 
</td> 
</tr> 
«t 
int i= 
while (rs.next ()) 
{ 
5» 
«tr» 
<td> &nbsp;« $=rs.getString ("userName")$»« /td> 
«td» &nbsp;« $=rs.getString ("userPassword")% >< /td> 
«td» &nbsp;« $—- rs.getString("email")$ ></td> 





«td align-center»« input type- checkbox name- deleteID 
value-«$-rs.getLong("ID")$ »»« /td> 
</tr> 
<% 
itt; 
if(i»  perPageCount- 1) break; 


&» 
«tr» 

<td colspan=5 align-center» «br» 

«input type- submit name- delete value= 删 除 所 选用 户 > 

</td> 
</tr> 

</form> 
</table> 

<br> 
<table width= "90$ " border=0> 
<tr align="right" valign="top"> 
<td colspan="4" align="right"> 
<% 

String firstLink, lastLink, preLink, nextLink; 
firstLink="allUserList .jsp?page=1"; 
lastLink= "allUserList .jsp? page= "4 totalPageCount; 
if (currentPage> 1) 
{ 

preLink- "allUserList .jsp? page= "+ (currentPage- 1); 
i 
else 


t 
prelink-firstLink; 
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if (currentPage <=totalPageCount- 1) 
{ 
nextLink- "allUserList. jsp? page= "+ (currentPaget 1); 


5» 
< form method="post" action= "allUserList .jsp"> 
//"allUserList.jsp" 为 本 页 面 名 称 
<p align= center> 共 < font color="# 0000FF"><%=count %></font> 条 第 < font 
color= "# 0000FF"» <% = currentPage % > < /font> 页 / 共 < font color="# 0000FF"> <%= 
totalPageCount $»« /font> 页 | <a href=<% = firstLink$ >> 首 页 </a> | «a href=<%= 
preLinkg>> 上 一 页 </a> | <a href=<%=nextLinkt >> 下 一 页 </a> | <a href=<%=lastLinkt > > 
尾 页 < /a> | 转 到 
«input type="text" name-page size=2><input type="submit" name= submit value- GO 


></p> 
« /form» 
</td> 
</tr> 
</table> 
3) 商品 管理 


在 “商品 管理 "模块 管理 员 可 以 对 所 有 美食 信息 进行 查看 和 修改 ,具体 实现 效果 图 如 
图 9-31 所 示 。 


目 idoupp [BinoManogementip [E] iogoutiso [F locinCheckiso [Bnormal topiop (AERA ENR. [ 


BS M GP Hipilocalbost 8060/shopfedmin/adin indexisp. 








所 有 美食 信息 





美食 类 美食 名 所 属 店铺 f Bie 
ana 488 Tk E: 
CSS 


Jus 第 ! 页 / 共 ! 页 | 首页 | 上 一 页 | 下 一 页 DER SEO (€ 





图 9-31 商品 管理 页 面 
关键 实现 代码 如 下 : 


« jsp:useBean scope- "page" id- "goods" class- "com.tuan.goods" /> 
« jsp:useBean scope- "page" id-"executeWayl" class- "com.tuan.executeWay" /> 
« jsp:useBean scope- "page" id="executeWay2" class- "com.tuan.executeWay" /> 
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<% 
int count=0; 
int totalPageCount= 
int perPageCount= 








int currentPage=1; 
String pageId= request .getParameter ("page") ; 
if (pageId!-null) 
{ 
currentPage- Integer .parseInt (pageId); 


$5 
«p align="center">< font size="5"> 所 有 美食 信息 </font>< /p> 
< form name= forml action= goodsDelete.jsp method=post> 
< input type=hidden name- "page" value=<% =currentPage% >> 
<table width= "90%" border=0 style- "text- align:center"» 
«tr bgcolor- "i DFDFDF"> 
«td align- "center" « font size- "4"> 美 食 类 < /font>< /td> 
«td align- "center" « font size- "4"» X ft 44 fk « /font>< /td» 
«td align- "center" « font size- "4"> 所 属 店铺 < /£ont» « /td> 
«td align- "center"» « font size="4"> 操 作 < /£ont» « /td» 
<td align="center">< font size- "4"> 删 除 </font>< /td> 
</tr> 
<tr> 
<td> 
<% 
ResultSet rs=goods.showGoods () ; 
rs.last();// 移 到 末尾 
count=rs.getRow();// 取 得 总 查询 数 
totalPageCount= (count+ perPageCount - 1) /perPageCount; 
if (currentPage> totalPageCount || currentPage<=0) 
{ 
currentPage= 1; 
} 
int currentIndex= (currentPage -1) * perPageCount+1; 
if (count> 0) 
t 
rs.absolute (current Index) ; 
String strSqll=" select name from goodsField where ID= '"4 rs. getLong (" 
goodsField")-"'"; 
String strSgl2-" select * from users where ID= '"+ rs. getLong 
("issuer") "'"; 
ResultSet rsl-executeWayl.exeSqlQuery (strSqll); 
ResultSet rs2-executeWayl.exeSqlQuery (strSq12); 
rsl.first(); 
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rs2.first(); 
$» 
«tr» 
«td» &nbsp;« $= rsl.getString ("name") $ >< /td> 
«td» &nbsp;« a href= ../goodsShow. jsp? ID= « $ = rs.getLong ("ID")% > target=_ 
blank» «$-rs.getString("title")$»« /a»« /td» 
<td> &nbsp;« $=rs2.getString ("shopName")$ >< /td> 
< td» &nbsp; < a href = goodsModi fyForm. jsp? ID= <$ = rs. getIong ("ID")% > > 
修改 </a>< /td> 
<td align= center> < input type= checkbox name= deleteID value=<%=rs.getLong 
("ID") &>>< /td> 
</tr> 
<% 
int i=1; 
while (rs.next ()) 
{ 
strSqll= "select name from goodsField where ID='"+rs. 
getLong ("goodsField")+"'"; 
strSql2="select * from users where ID= '"+ rs. getLong 
("issuer")+"""7 
rsl-executeWayl.exeSqlQuery (strSqll); 
rs2-executeWayl.exeSqlQuery (strSq12); 
rsl.first(); 
rs2.first(); 
$> 
<tr> 
<td> &nbsp;« $%=rs1l.getString ("name") % >< /td> 
<td> &nbsp;« a href=. ./goodsShow. jsp? ID- « $ - rs.getLong ("ID")$& 
»target- blank» «$-rs.getString("title")$»« /a» « /td> 
«td» &nbsp;« $- rs2.getString("shopName")$ >< /td> 
<td> &nbsp;« a href- goodsModifyForm.jsp? ID- « $- rs. 
getLong("ID")$ 5» [E ilt « /a» « /td> 
<td align-center» «input type= checkbox name=deleteID 
value-«$-rs.getLong ("ID") &»»« /td» 


</tr> 
<% 
itt; 
if(i» perPageCount-1) break; 
$ 
h 
s» 
</td> 
</tr> 
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<td colspan= 5 align= center><br>< input type= submit name= delete value= 删 除 


所 选 商品 >< /td> 
</tr> 
</table> 
</form> 

<br> 


<table width= "90$ " border=0> 
<tr align="right" valign="top"> 
<td colspan="4" align="right"> 
<% 

String firstLink, lastLink,preLink,nextLink; 
firstLink- "allGoodsList.jsp?page- 1"; 
lastLink- "allGoodsList.jsp? page= "+ totalPageCount; 
if (currentPage> 1) 
{ 

preLink- "allGoodsList. jsp? page= "+ (currentPage- 1); 
} 
else 
{ 

preLink= firstLink; 
i 
if (currentPage <=totalPageCount- 1) 
f 

nextLink- "allGoodsList.jsp?page- "+ (currentPage- 1); 
} 
else 
{ 

nextLink= lastLink; 
) 

5» 
< form method="post" action= "allGoodsList.jsp"> 


//"allGoodsList.jsp" 为 本 页 面 名 称 
<p align=center> 共 <font color="#0000FF">< 名 =count %></font> 条 第 <font color="# 
0000FF">< $=currentPage 和 ></font> 页 / 共 <font color="# 0000FE"> <%= totalPageCount %></font 
> 页 | «a href=<%=firstLinkt>>B Ji </a> | «a href-« $-prelink$»» Ł— M< /a» | «a href=<%= 


nextLinks>> 下 一 页 </a> | «a href-<%=lastLink%>> 尾 页 </a> | 转 到 


«input type="text" name-page size-2»« input type="submit" name= submit value 


=GO>< /p> 
</form> 
</td> 
</tr> 


</table> 
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本 章 采 用 ISP JavaBean JavaScript 以 及 数据 库 访 问 技术 构建 一 个 完整 的 美食 购物 
系统 ,着 重 讲解 各 个 功能 模块 的 实现 三 种 不 同 的 角色 权限 划分 、JavaBean 的 使 用 以 及 数 
据 库 的 访问 技术 。 读 者 可 以 根据 前 面 章节 的 讲解 对 本 项 目 程序 进行 改写 ,以 进一步 完善 
其 功能 ,丰富 其 界面 。 


本 章 习 题 


改写 本 章 实现 的 美食 购物 系统 , 试 利用 MVC 模式 开发 ,加 入 Servlet, 由 Servlet 处 理 
请 求 和 控制 业务 流程 ,JSP 输出 界面 显示 ,JavaBean 负责 具体 的 业务 数据 和 业务 逻辑 。 


1. 字体 属性 
字体 属性 说 明 如 表 A-1 所 示 。 
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表 A-1 字体 属性 说 明 





























属 性 属性 含义 属 性 值 

font-style 字体 风格 normal, italic, oblique 

font-variant 字体 变化 normal, small-caps 

font-weight 字体 的 粗细 normal, bold. bolder, lighter 等 
数值 ,百分比 或 smaller, larger。 数 值 的 单位 可 以 是 in( 英 
才 ),em( 厘 米 ) ,mm( 毫 米 ),pc( 打 印 机 的 字体 大 小 ) ,Pt( 像 

font-size 字体 的 大 小 素 ),1lin 一 2. 54cm 一 25. 4mm — 72pt — 6pc; Fi 4) EE HIR 
认 值 而 言 ;smaller: 比 当前 文字 的 默认 值 小 一 号 ;larger: 比 
当前 文字 的 默认 值 大 一 号 

font-family 使 用 的 字体 所 有 字体 ,如 黑体 ,隶书 

font 以 上 属性 的 综合 表示 | 如 : font: italic normal bolder 24pt 宋体 

2. 颜色 和 背景 属性 


颜色 和 背景 属性 说 明 如 表 A-2 所 示 。 


表 A-2 颜色 和 背景 属性 说 明 























属 属性 含义 属 性 值 举 mp 
hl {color: black} 
color 前 景色 颜色 值 h2{color: # 0099ff} 
h3ícolor: rgb(206 ,82,28)} 
background color 背景 色 颜色 值 、 body{ background-color: red} 
transparent p{ background-color: transparent} 
Z body{ background-image: url(bg. jpg) } 
background-image 背景 图 像 统一 资源 定位 p{ background-image: url 
器 URL 1 
(http: //www. sohu. combg. jpg) ) 
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续 表 
属 性 属性 含义 属 性 值 举 例 
Tepeat 
background-repeat 背景 图 像 的 重 | no-repeat body(background-repeat: no-repeat} 
BAK repeat-x 
repeat-y 
RARE A si 
background-attachment | 随 页 面 滚 动 。 fixed body{ background-attachment; fixed) 
默认 值 为 sroll x 
数值 .百分比 或 | body{ background-position: 20% 40%} 
4 图 
background-position Ir RAR top. left, right, | body { background-position: bottom 
bottom,center left ) 
背景 属性 综合 TR GR body{ background; red url(bg. jpg) no- 
background 表示 像 .重复 方式 、 repeat left 30pt) 
背景 位 置 
3. 文本 属性 


文本 属性 说 明 如 表 A-3 所 示 。 


表 A-3 文本 属性 说 明 





























属 性 属性 含义 属性 d 
letter-spacing 设 定 字符 之 间 的 距离 数值 或 normal 
line-height 设 定 相 邻 两 行 的 间距 数值 .百分比 或 normal 
text-align 设置 文本 横向 对 齐 方式 left, right center justify 
baseline 默认 值 .super | th, sub F tH, top 上 对 齐 、 
vertical-align 设置 文本 纵向 对 齐 方式 middle 居中 , bottom F X} FF. text-top 文字 上 对 齐 、 
text-bottom 文字 下 对 齐 
text-indent 设 定 文本 行 首 的 缩 进 方式 ”| 数值 或 百分比 
4. 容器 属性 


CSS 的 容器 属性 包括 边 距 .填充 距 、 边 框 和 宽度 、 高 度 等 ,这 些 属性 很 多 ,下 面 分 类 


介绍 。 


边 距 属性 说 明 如 表 A-4 所 示 。 


R A-4 边 距 属性 说 明 











A 性 属性 含义 属 性 值 
margin-top 设置 内 容 与 上 边界 的 距离 | 数值 或 百分比 
margin-right 设置 内 容 与 右边 界 的 距离 | 数值 或 百分比 
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续 表 





mA 性 


属性 含义 属 性 值 





margin-bottom | 设置 内 容 与 下 边界 的 距离 | 数值 或 百分比 





margin-left 设置 内 容 与 左边 界 的 距离 | 数值 或 百分比 





顺序 是 上 、 右 下 、 左 ,如 果 只 给 出 1 个 值 , 则 应 用 于 


margin 以 上 属性 的 综合 表示 4 个 边界 ;如 果 只 给 出 2 个 或 3 个 值 , 则 未 显 式 给 出 





值 的 边 用 其 对 边 的 设 定 值 








填充 距 属性 说 明 如 表 A-5 所 示 。 


属 性 


RAS 填充 距 属 性 说 明 
属性 含义 属 性 值 





padding-top 设置 内 容 与 标记 块 上 边界 的 距离 | 数值 或 百分比 





padding -right | 设置 内 容 与 标记 块 右 边界 的 距离 | 数值 或 百分比 





padding -bottom | 设置 内 容 与 标记 块 下 边界 的 距离 | 数值 或 百分比 





padding -left 设置 内 容 与 标记 块 左边 界 的 距离 | 数值 或 百分比 





顺序 是 上 、 右 、 下 、 左 ,如 果 只 给 出 1 个 值 , 则 


padding 以 上 属性 的 综合 表示 应 用 于 4 个 边界 ;如 果 只 给 出 2 个 或 3 个 值 ， 








则 未 显 式 给 出 值 的 边 用 其 对 边 的 设 定 值 


边框 属性 说 明 如 表 A-6 所 示 。 


表 A-6 边框 属性 说 明 





























属 性 属性 含义 属 性 值 
border-top-width 设置 上 边框 的 宽度 thin, medium, thick 数值 
border-right-width — | 设置 右边 框 的 宽度 thin, medium, thick , Si fii 
border-bottom-width | 设置 下 边框 的 宽度 thin, medium, thick 数值 
border-left-width 设置 左边 框 的 宽度 thin, medium, thick 数值 

设置 上 、 右 \ 下 、 左 边框 的 宽度 , 如 果 只 给 出 
en | oa ck a 
设 定 值 
border-top-color 设置 上 边框 的 颜色 颜色 
border-right-color 设置 右边 框 的 颜色 颜色 
border-bottom-color | 设置 下 边框 的 颜色 颜色 
border-left-color 设置 左边 框 的 颜色 颜色 
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续 表 





属 性 


属性 含义 





border-color 


设置 上 、 右 、 下 、 左 边框 的 颜色 , 如 果 只 给 出 
1 个 值 , 则 应 用 于 4 个 边界 ;如 果 只 给 出 2 个 
或 3 个 值 , 则 未 显 式 给 出 值 的 边 用 其 对 边 的 
设 定 值 


颜色 





none( 默 认 值 ) dotted, dashed, 























border-style 设 定 元 素 边框 的 样式 solid, double, groove, ridge, 
inset offset 

border-top 设置 上 边框 的 宽度 .样式 .颜色 = 

border-right 设置 右边 框 的 宽度 .样式 .颜色 E 

border-bottom 设置 下 边框 的 宽度 ,样式 .颜色 = 

border-left BCE AE HE AY SERE EK BA = 

border 设置 边框 的 宽度 、 样 式 .颜色 = 


高 度 及 其 他 属性 说 明 如 表 A-7 所 示 。 


RAT 高 度 及 其 他 属性 说 明 

















5. 列表 属性 





列表 属性 说 明 如 表 A-8 所 示 。 


RAS 列表 属性 说 明 


属 性 属性 含义 属性 d 
width 设置 宽度 auto\ 百 分 比 ,数值 
height 设置 高 度 auto, 数值 
fios 设置 文字 围绕 (浮动 ) 于 left: 标记 靠 左 ,设置 文字 围绕 在 标记 右边 ;right: 标记 靠 右 ， 
标记 周围 的 方式 设置 文字 围绕 在 标记 左边 ;none: 以 默认 位 置 显 示 





属 性 


属性 含义 





list-style-type 





无 序 表 


有 序 表 
列表 项 的 符号 





disc: 实心 圆 点 
circle: 空心 圆 点 
square: 小 方块 


decimal: 阿拉 伯 数 字 
lower-roman: 小 写 罗 马 数字 
upper-roman: 大 写 罗马 数字 
lower-alpha: 小 写 英文 字母 
upper-alpha: 大 写 英 文字 母 
none: 不 设 定 
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续 表 
属 性 属性 含义 属 性 值 
list-style-image 用 图 像 代替 列表 项 的 符号 url 
list-style-position 列表 项 的 缩 进位 置 ser pm 
list-style 综合 设置 列表 项 的 符号 缩 进位 置 
6. 定位 属性 
定位 属性 说 明 如 表 A-9 所 示 。 
RAD 定位 属性 说 明 
m 人 性 属性 含义 属 性 值 
absolute; 位 置 设置 为 absolute 的 元 素 ,可 定位 于 相对 
于 包含 它 的 元 素 的 指定 坐标 。 此 元 素 的 位 置 可 通过 
left.top.right 以 及 bottom 属性 规定 
relative: 位 置 被 设置 为 relative 的 元 素 , 可 将 其 移 至 相 
对 于 其 正常 位 置 的 地 方 ,因此 "left: 20" 会 将 元 素 移 至 
元 素 正常 位 置 左边 20 个 像素 的 位 置 
position 定位 方式 (绝对 、 相 对 ) static: 上 默认。 位置 设置 为 static 的 元 素 , 它 始终 会 处 
于 页 面 流 给 予 的 位 置 (static 元 素 会 忽略 任何 top, 
bottom, left 或 right 声明 ) 
fixed: 位 置 被 设置 为 fixed 的 元 素 , 可 定位 于 相对 于 浏 
览 器 窗口 的 指定 坐标 。 此 元 素 的 位 置 可 通过 left, top, 
right 以 及 bottom 属性 规定 
不 论 窗口 滚动 与 否 ,元 素 都 会 留 在 那个 位 置 
left top 与 窗口 左 端 上 端的 距离 | auto, 数 值 、 百 分 比 
width height 宽 和 高 auto. 数值 .百分比 
visible: 可 见 
evecilow 内 容 超出 时 的 处 理 方式 。 | dens TODA 
scroll: 滚动 
auto: 自动 
z-index 三 维 空间 auto, 整数 
visible: 可 见 
visibility 可 见 性 hidden: 不 可 见 
inherit: 继承 
7. 鼠标 属性 


鼠标 属性 说 明 如 表 A-10 所 示 。 
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表 A-10 ”鼠标 属性 说 明 
属 性 属性 含义 属 性 值 


auto: 按 默认 状态 自行 改变 
crosshair: 十 字形 

default: 默认 方式 

hand: 手 形 

move: 双 箭头 十 字形 
eresize: 横向 双 箭头 
ne-resize: 朝 右 上 方 双 箭头 
nw-resize: 朝 左 上 方 双 箭 头 
n-resize: 竖立 双 箭 头 
se-resize: 朝 左 上 方 双 箭头 
sw-resize: WALI MAA 
s-resize: 竖立 双 箭 头 
w-resize: 横向 双 箭 头 
text: 文本 I 形 

wait: 等 待 漏斗 形 

help: 帮助 问号 形 








cursor 鼠标 的 形状 








8. 显示 属性 
显示 属性 说 明 如 表 A-11 所 示 。 
表 A-11 显示 属性 说 明 
属 性 属性 含义 属 性 值 


none: 不 显示 
block: 显示 为 块 ,前 后 会 带 有 换行 符 
inline; 默认 。 显 示 为 内 联 元 素 ,元 素 前 后 没有 换行 符 









display 设置 显示 方式 
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一 、 常 用 内 建 对 象 

1. Array 数组 对 象 

(1) 创建 Array 数组 对 象 实例 。 语 法 格式 如 下 : 
var 数组 名 =new Rrray([ 元 素 个 数 ])7 


例如 : 

var al=new Array (); // 创 建 数 组 对 象 实例 al, 元 素 个 数 不 定 

var a2=new Array (8); // 创 建 数 组 对 象 实例 a2, 元 素 个 数 8 

(2) 数组 元 素 的 引用 。 语 法 格式 如 下 : 

数组 名 [下 标 值 ] 

例如 : 

al[0]- "JavaScript"; // 为 al 数组 的 0 号 元 素 赋 字 符 串 值 Javascript 
a2[2]-al[0]; // 为 a2 数 组 的 2 号 元 素 赋 al[0] 的 值 


数组 元 素 的 下 标 值 是 从 0 开始 的 , 若 数组 有 8 个 元 素 . 则 其 下 标 值 是 0 一 7。 
(3) Array 数组 对 象 的 特点 。 
。 数组 元 素 的 数据 类 型 不 要 求 一 致 。 可 以 给 一 个 数组 的 不 同 元 素 赋 不 同 数据 类 型 


的 值 。 例 如 : 
al[0]- "JavaScript"; // 为 al 数组 的 0 号 元 素 赋 字 符 串 值 JavaScript 
al[1]-123; // 为 al 数组 的 工 号 元 素 赋 数 值 123 


数组 元 素 可 以 是 对 象 。 当 数组 元 素 是 数组 对 象 时 ,可 以 得 到 二 维 数组 。 例 如 : 


var al=new Array(10); 
for(j=0;j<10;j++){al[j]=new Array(6);} 


这 就 创建 了 一 个 10X6 的 二 维 数组 。 
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。 数组 长 度 可 以 动态 变化 。 
例如 : 


var al=new Array(10); 


若 要 将 al 增加 到 20 个 元 素 , 则 只 要 执行 语句 “al[19] 二 1;” 即 可 。 
。， 数 组 的 创建 和 赋值 可 一 步 完 成 。 例 如 : 


var al=new Array(12,21,23,56,15); 


这 就 创建 了 一 个 5 个 元 素 的 数组 ,其 值 是 12,21,23,56,15。 
(A) Array 数组 对 象 的 属性 和 方法 分 别 如 表 B-1 和 表 B-2 所 示 。 


表 B-1 Array 数组 对 象 的 属性 说 明 


属 性 说 明 





length 数组 元 素 的 个 数 


表 B-2 Array 数组 对 象 的 方法 说 明 











方法 说 明 
concat( 数 组 1, 数组 2,…) | 合并 多 个 数组 并 返回 结果 
joinO. 联结 数组 元 素 为 一 字 串 并 返回 结果 
pop() 返回 并 删除 数组 的 最 后 一 个 元 素 





push( 元 素 1, 元 素 2,…) | 在 数组 的 最 后 增加 新 元 素 并 返回 新 的 数组 元 素 的 个 数 
逆转 数组 中 的 各 元 素 , 即 将 第 一 个 元 素 换 为 最 后 一 个 ,最 后 一 个 元 素 换 为 














reverse() 第 一 不 

shift 返回 并 删除 数组 的 第 一 个 元 素 
slice(start,end) 返回 start 到 end 位 置 的 数组 中 的 元 素 
sort() 排序 





Al. splice(0,0，"11"，"22"); 从 Al[o] 开 始 插入 11 和 22 


sulista PLAG; A1. splice(0,1, "11", "22"); K Al[0] 开 始 先 删除 一 个 元 素 再 插入 11 








和 22 

Semend element2,7 | Al spliceGl,2，"11"，"22"); 从 Al[1] 开 始 先 删除 2 个 元 素 再 插入 11 
和 22 

toString() 将 数组 元 素 转换 为 字 串 并 返回 结果 

unshift() 从 数组 的 开头 增加 新 元 素 并 返回 新 的 数组 元 素 的 个 数 








2. String 对 象 


在 JavaScript 中 每 个 字符 串 都 是 对 象 。 
CD. 创建 String 对 象 实例 ,语法 如 下 : 


var String 对 象 实例 名 = 字符 串 ， 
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或 
[var] String 对 象 实例 名 =new String (FHP); 
例如 : 


var Sl= "JavaScript"; 


var S2=new String("JavaScript"); 

(2) String 对 象 的 属性 和 方法 的 说 明 分 别 如 表 B-3 MK B-4 所 示 。 
表 B-3 String 对 象 的 属性 说 明 

RO | 说 明 
length 字符 串 中 字符 的 个 数 
表 B-4 String 对 象 的 方法 说 明 
方 法 说 m" 
创建 HTML 锚 点 。 例 如 ， 


var txt=" Hello world!"; 

anchor( 锚 点 名 ) document, write( txt. anchor("myanchor")); 
形成 的 HTML 文档 是 

<a name="myanchor"> Hello world!</a>; 


用 比 默认 大 一 些 的 字号 显示 。 例 如 : 
































bigO var txt — "Hello world!" ; 
document. write(txt. bigO) ; 
boldO 字体 加 粗 
charAt(index) 返回 index 位 置 的 字符 
charCodeAt(index) 返回 index 位 置 字符 的 Unicode 83 
合并 字符 串 。 例 如 : 
concat( 字 串 1, 数组 2,…) var s1="Hello" ;var s2—" world!" ;var s3—"!"; 
var s4=sl. concat(s2, s3); 
fixed teletype 字体 
指定 字符 串 颜色 color. fln. 
fontcolor(color) var str="Hello world!" ; 


document. write(str. fontcolor(" Red")) ; 


指定 字符 串 字号 size. Din. 
fontsize(size) var str="Hello world!"; 
document. write(str. fontsize(12)) ; 


String. fromCharCode (U1, U2,| 将 Unicode 码 转 为 字符 串 。 例 如 : 











or) document. write(String. fromCharCode(65 ,66.67)) ; 
从 index 位 置 开 始 搜索 searchvalue, 返 回 匹配 的 位 置 。 例 如 : 
indexOf(searchvalue, index) var str="Hello world!"; 





var il=str. indexOf("wo".0); 
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续 表 





说 明 





italics() 


Italics( 斜 ) 字 体 





lastIndexOf(searchvalue, index) 


从 index 位 置 开 始 搜索 searchvalue, 返 回 最 后 匹配 的 位 置 。 例 如 : 
var str="Hello world! Hello world!"; 
var il=str, lastIndexO ("wo",0); 





将 字符 串 显示 为 超 链接 。 例 如 
var str 一 "Free Web Tutorials!" ; 
document. write(str. link("http;//www. w3schools. com")) ; 





linkO 形成 的 HTML 文档 是 
<a herf=" http://www. w3schools. com"" > Free Web Tutorials ! 
</a>; 

match(searchvalue) 在 字符 串 中 搜索 searchvalue, 若 匹配 返回 searchvalue 





replace(/findstring/[i] ,newstring) 


用 newstring 替换 findstring,i 不 区 分 大 小 写 。 例 如 : 
var str="Visit Microsoft!" ; 
document. write(str. replace( /microsoft/i, "W3Schools")) ; 





search( /searchstring/[i]) 


在 字符 串 中 搜索 searchvalue, 若 匹配 返回 位 置 ,无 匹配 返回 一 1。i 
不 区 分 大 小 写 。 例 如 : 

var str="Visit W3Schools!" 

var i—str. search(/W3Schools/) ; 





sliceCstart[ ,end]) 


返回 从 start 位 置 开 始 到 end 结束 的 字符 串 





small() 


用 比 默认 小 一 些 的 字号 显示 





splitCseparator[ ,howmany]) 


返回 一 数组 ,元 素 是 用 分 隔 符 separator 分 隔 字符 串 后 的 值 ， 
howmany 是 分 隔 的 次 数 。 例 如 : 

var str 一 "How are you doing today?"; 

document, write(str. split(" ")+ "<br />"); 
document. write(str. split(" ") +"<br />"); 

var s2=str. split(" ",3); 

document. write(s2[0 ]-- "<br />"); 

document. write(s2[1]+ "<br />"); 

document, write(s2[2 ]-- " br />"); 
输出 的 结果 是 

How, are, you, doing, today? 
H,oyw,,a'ryeyyyyoyuyyd,o'i'nyg,,tyovd,ayy,? 
How 

are 

you 





strike) 


删除 线 。 例 如 : 

document. write("Hello world!". strikeO) ; 
输出 的 结果 是 

-Hello-worldt 





subQ 





下 标 
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续 表 





方 法 说 明 
返回 从 start 位 置 开始 截取 length 个 字符 的 字符 串 。 例 如 : 


document, write(" Hello world!". substr(0,5)) ; 
输出 的 结果 是 
Hello 


返回 从 start 位 置 开 始 到 stop 结束 的 字符 串 。 例 如 : 


document. write("Hello world!". substring(6,7)) ; 





substr(start[ , length ]) 





substringCstart[ ,stop]) 














输出 的 结果 是 
w 
supO Lh 
toLowerCase() 返回 小 写字 符 串 
toUpperCase() 返回 大 写字 符 串 


3. Math 对 象 

Math 对 象 封 装 了 常用 的 数学 常数 和 运算 公式 ,如 圆周 率 PI、10 的 自然 对 数 、 三 角 函 
数 、 对 数 函 数 等 。Math 对 象 是 “静态 对 象 ”, 它 本 身 就 是 一 个 实例 ,不 能 用 new 创建 Math 
对 象 实例 ,直接 通过 对 象 名 Math 引用 。 例 如 , 求 2 的 2 KH: 


var pl=Math.pow (2,2); 
(1) Math 对 象 的 属性 说 明 如 表 B-5 所 示 。 
表 B-5 Math 对 象 的 属性 说 明 



































属 性 说 明 
E 常数 e, 自 然 对 数 的 底 , 近 似 值 为 2. 718。 例 如 : var E1 一 Math. E; 
LN2 2 的 自然 对 数 , 近 似 值 为 0. 693e 
LN10 10 的 自然 对 数 ,近似 值 为 2. 302 
LOG2E 以 2 为 底下 的 对 数 , 即 log:e, 近 似 值 为 1. 442 
LOG10E 以 10 为 底 王 的 对 数 , 即 logioe, 近 似 值 为 0. 434 
PI 圆周 率 , 近 似 值 为 3. 142 
SQRTI 2 0. 5 的 平方 根 ,近似 值 为 0. 707 
SQRT2 2 的 平方 根 ,近似 值 为 1. 414 

(2) Math 对 象 的 方法 说 明 如 表 B-6 所 示 。 

X B-6 Math 对 象 的 方法 说 明 

方 法 说 明 

abs(x) 返回 x 的 绝对 值 。 例如: var al 一 Math. abs(—126); 
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续 表 
方 dk 说 明 
acos(x) 返回 x 的 反 余弦 值 
asin(x) 返回 x 的 反正 弦 值 
atan(X) 返回 x 的 反正 切 值 
从 圆 的 x 轴 逆 时 针 测量 时 ,以 弧度 为 单位 计算 并 返回 点 y/x 的 角 ( 其 中 0,0 dE DU 
aren iy), 返回 值 介 于 正 PI 和 负 PI 之 间 
ceil(x) 返回 大 于 或 等 于 x 的 最 小 整数 值 
cos(x) 返回 x 的 余弦 值 
exp(x) 返回 e 的 x 次 方 
floor(x) 返回 小 于 或 等 于 x 的 最 小 整数 值 
log(x) 返回 x 的 自然 对 数 
max(xyy) 返回 x 和 y 之 间 的 大 者 
min(x,y) 返回 x 和 y 之 间 的 小 者 
pow(x.y) 返回 x 的 y 次 方 
random() 返回 O~1 之 间 的 随机 数 。 例 如 : var al 一 Math. random; 
round(x) 返回 x 四 会 五 人 后 的 整数 
sin(x) 返回 x 的 正弦 值 
sqrt(x) 返回 x 的 平方 根 
tan(x) 返回 x 的 正切 值 
4. Number 对 象 


Number 对 象 也 是 “静态 对 象 ”, 它 本 身 就 是 一 个 实例 ,不 能 用 new 创建 Math 对 象 实 
例 ,直接 通过 对 象 名 Number 引用 。 所 有 的 数值 都 是 Number 对 象 。 
COD Number 对 象 的 属性 说 明 如 表 B-7 所 示 。 


表 B-7 Number 对 象 的 属性 说 明 











m 说 m 
MAX, VALUE 返回 可 用 JavaScript 表示 的 最 大 的 数 , 约 等 于 1. 79E--308 
MIN_VALUE 返回 可 用 JavaScript 表示 的 最 接近 0 的 数 , 约 等 于 5. 00E 一 324 





一 个 特殊 值 ,此 值 指示 算 术 表 达 式 返回 了 非 数字 值 。 例如 ,被 0 除 返 





net 回 NaN 
返回 比 JavaScript 可 表示 的 最 小 负数 (二 Number MAX_VALUE) 更 小 
NEGATIVE INFINITY | 的 信 , 即 仙 先 穷人 





POSITIVE_INFINITY 


返回 比 JavaScript 中 能 够 表示 的 最 大 的 数 (Number. MAX_VALUE) 更 
大 的 值 , 即 正 无 穷 大 
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(2) Number 对 象 的 方法 说 明 如 表 B-8 所 示 。 
表 B-8 Number 对 象 的 方法 说 明 
X 法 说 明 


返回 一 个 以 指数 记 数 法 表示 的 数字 的 字符 串 。fractionDigits: 可 选项 ,小 
数 点 后 数字 位 数 ,必须 在 0<=fractionDigits<=20 之 间 。 例 如 ， 
s2 一 232. 345634565; 














toExponential document. write(s2+"<br>"); 
([fractionDigits ]) document. write(s2. toExponential(4) +"<br>"); 
输出 的 结果 是 
232. 345634565 
2. 3235e 十 2 
toFixed([fractionDigits]) | 返回 一 个 字符 串 , 表 示 一 个 以 定点 表示 法 表示 的 数字 
toLocaleString() 以 字符 串 值 的 形式 返回 一 个 值 





返回 一 个 字符 串 ,其 中 包含 一 个 以 指数 记 数 法 或 定点 记 数 法 表示 的 , 具 
toPrecision([precision]) | 有 指定 数字 位 数 的 数字 。precision: 可 选 , 有 效 位 数 ,必须 在 0< = 
precision 一 一 20 之 间 





另外 ,Number 对 象 可 以 将 字符 型 数字 转换 为 数值 型 。 例 如 ， 
var nl=12+Nunber ("36") ; //nl 的 结果 是 48 


5. Boolean 对 象 
创建 Boolean 对 象 实例 ,语法 如 下 : 
var 对 象 实例 名 = Boolean (boolValue); 


Boolean 对 象 实例 只 有 两 个 值 : true 或 false。 如 果 boolValue 被 省 略 或 者 为 false、0、 
null, NaN 或 空 字符 串 ,Boolean 对 象 的 初始 值 则 为 false。 和 否则 ,初始 值 为 true。 例 如 : 

var Bl=new Boolean () //B1 的 值 为 false 

var B2- new Boolean (6) //82 的 值 为 true 

由 于 Boolean 对 象 与 Boolean 数据 类 型 互 用 ,所 以 很 少 需要 显 式 构造 Boolean 对 象 。 
在 大 多 数 情况 下 应 使 用 Boolean 数据 类 型 。 

6. Function 对 象 

Function 对 象 提 供 了 另 一 种 定义 和 使 用 函数 的 方法 。 利 用 Function 对 象 定义 函数 
对 象 实例 的 语法 如 下 : 


var Fname-new Function ([paraml, param?, ..., ]body) ; 


其 中 ,Fname 是 函数 名 ,[paraml ,param2,...,] 是 形式 参数 ,它们 可 以 没有 。Body BF 
符 串 形 式 的 函数 体 。 

Function 构造 函数 允许 脚本 在 运行 时 创建 函数 ,因此 脚本 具有 更 大 的 灵活 性 ,但 它 
也 会 减 慢 代码 的 执行 速度 。 为 了 避免 减 慢 脚 本 速度 ,应 尽 可 能 少 地 使 用 Function 构造 函 
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数 。 传 递 到 Function 构造 函数 的 参数 ( 除 最 后 一 个 参数 之 外 的 所 有 参数 ) 将 用 作 新 函数 
的 参数 。 传 递 到 构造 函数 的 最 后 一 个 参数 解释 为 函数 体 的 代码 。 例 如 : 


Var Fl=new Function ("FF", "document.write (FF+ V"ScriptV") ;") ; 


以 后 就 可 以 调用 它 : 


F1("Java" 


则 会 输出 : 


ye 


JavaScript 


Function 对 象 的 属性 如 表 B-9 所 示 。 


表 B-9 Function 对 象 的 属性 说 明 











属 性 说 明 

arguments | 这 是 一 数组 对 象 ,其 元 素 是 传递 给 该 函数 的 实 参数 值 

length 当 创 建 一 个 函数 的 实例 时 ,函数 的 length 属性 被 初始 化 为 该 函数 中 定义 的 参数 数目 
7. Date 对 象 


Date 对 象 封装 了 许多 有 关 设置 .获得 和 处 理 日 期 和 时 间 的 方法 ,但 没有 任何 属性 。 
(1) 创建 Date 对 象 实例 。 语 法 如 下 : 


[var] Date 


dateVal 


e 对 象 实例 名 =new Date ([dateVal]); 
有 多 种 形式 ,常用 如 下 的 形式 ,例如 : 


var Dl=new Date (); // 将 当前 时 间 指 定 给 D1 

var D2=new Date (2006,5,1); //¥ 2006 年 5 月 1 日 0 时 0 分 0 秒 指定 给 D2 
var D3=new Date (2006,5,1,10,2,50); // 将 2006 年 5 月 1 日 10 时 2 分 50 秒 指定 给 D3 
var D4= new Date ("May 1,2006 10:2:50"); ”// 将 2006 年 5 月 1 日 10 时 2 分 50 秒 指定 给 D4 


(2) Date 对 象 的 方法 说 明 如 表 B-10 所 示 。 


表 B-10 Date 对象 的 方法 说 明 





方 


法 说 " 





getDate() 


返回 值 是 一 个 1 一 31 之 间 的 整数 ,表示 Date 对 象 实例 中 日 期 的 天 数 





getDay() 


返回 值 是 一 个 0 一 6 的 整数 ,该 整数 表示 星期 几 。 例 如 : 

x=new 

Array("Sunday" ," Monday" , " Tuesday" ," Wednesday" ," Thursday" , 
"Friday" , "Saturday" ; 

document. write(" 今 天 是 : "十 xLnew DateO. getDayO ]+"<br>"); 





getFullYear() 


返回 值 是 一 个 4 位 数 ,表示 Date 对 象 实例 中 日 期 的 年 份 





getHours() 





返回 Date 对 象 中 的 小 时 值 
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方 法 





getMilliseconds() 


返回 Date 对 象 中 的 毫秒 值 





getMinutes() 


返回 Date 对 象 中 的 分 钟 值 




















getMonth() 返回 一 个 0 一 11 的 整数 ,指示 Date 对 象 中 的 月 份 值 ,该 值 比 月 份 小 1 
getSeconds() 返回 一 个 0 一 59 的 整数 ,该 整数 是 Date 对 象 中 的 秒 值 

ahime 返回 一 个 整数 值 的 毫秒 数 ,该 数 表示 Date 对 象 中 的 时 间 值 与 1970 4E 1 
E 月 1 日 8 时 的 时 间 值 之 差 

etTimezoneOffsetC) 返回 一 个 整数 值 ,表示 当前 计算 机 上 的 时 间 和 GMT 时 间 之 间 相 差 的 
= 分 钟 数 (GMT 时 间 是 基于 格林 尼 治 时 间 的 标准 时 间 ,也 称 UTC 时 间 ) 
getUTCDate() 返回 Date 对 象 实例 中 日 期 的 以 UTC 时 间 计 算 的 天 数 
getUTCDay() 返回 值 是 一 个 0 一 6 的 整数 ,表示 Date 对 象 实例 中 UTC 时 间 的 星期 几 





getUTCFullYear() 


返回 值 是 一 个 4 位 数 ,表示 Date 对 象 实例 中 UTC 时 间 的 年 份 





getUTCHours() 


返回 Date 对 象 中 的 UTC 时 间 的 小 时 值 





getUTCMilliseconds() 


返回 Date 对 象 中 的 UTC 时 间 的 毫秒 值 





getUTCMinutes() 


返回 Date 对 象 中 的 UTC 时 间 的 分 钟 值 





getUTCMonth() 


返回 一 个 0 一 11 的 整数 ,指示 Date 对 象 中 的 UTC 时 间 的 月 份 值 ,该 值 
比 月 份 小 1 





getUTCSeconds() 


返回 一 个 0 一 59 的 整数 ,该 整数 是 Date 对 象 中 的 UTC 时 间 的 秒 值 





getVarDate() 


返回 Date 对 象 中 的 VT. DATE 值 。 当 同 COM 对 象 、.ActiveX@@ 对 象 
或 其 他 用 VT_DATE 形式 接收 及 返回 日 期 值 的 对 象 (如 VisualBasic 和 
VBScript) 交 互 时 ,使 用 getVarDate 方法 





getYear() 


若 年 份 是 1900 一 1999, 返 回 值 是 一 个 两 位 数 整数 ,该 值 是 Date 对 象 实 
例 的 年 份 与 1900 年 之 间 的 差 。 而 对 于 该 段 时间 之 外 的 年 份 ,将 返回 
一 个 4 位 数 年 份 。 例 如 ,1996 年 的 返回 值 是 96 ,而 1825 和 2025 年 则 
原样 返回 





parse(dateVal) 


返回 一 个 整数 值 ,此 整数 表示 date Val 中 所 提供 的 日 期 与 1970 年 1 月 
1 日 午夜 之 间 相差 的 毫秒 数 。parse 是 静态 方法 ,通过 对 象 名 直接 调 
用 。 例 如 : 

Date. parse("10 Jan 2000"); 

Date. parse("10 Jan 2000 8:9:9"); 





setDate(numDate) 


将 Date 对 象 实例 中 的 天 数 设 为 numDate 





setFullYear(numYear 
[:numMonth[ ,numDate]]) 


将 Date 对 象 实例 中 的 年 份 设 为 numYear。 可 选 numMonth: 月 份 、 
numDate: 天 数 





setHours(numHours 
[:numMin[ ,numSec 
L:numMilli]] D 





将 Date 对 象 实例 中 的 小 时 设 为 numHours。 可 选 numMin: 分 钟 、 
numSec: 秒 .numMilli: 毫秒 
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说 明 





setMilliseconds(numMilli) 


将 Date 对 象 实例 中 的 毫秒 设 为 numMilli 





setMinutes(numMinutes 
[ ,numSeconds[ ,numMilli]]) 


将 Date 对 象 实例 中 的 分 钟 设 为 numMinutes。 可 选 numSeconds: fh, 
numMilli; 毫秒 





setMonth(numMonth 
[,dateVal]) 


将 Date 对 象 实例 中 的 月 份 设 为 numMonth。 可 选 dateVal: 天 数 





setSecond(snumSeconds 
[:numMilli D 


将 Date 对 象 实例 中 的 秒 设 为 numSeconds。 可 选 numMilli: 毫秒 





setTime(milliseconds) 


设置 Date 对 象 中 的 日 期 和 时 间 值 。milliseconds: A UTC 1970 4F 1 H 
1 日 午夜 之 后 经 过 的 毫秒 数 





setUTCDatenumDate) 


使 用 UTC 时 间 设 置 Date 对 象 中 的 日 期 





setUTCFullYear ( numYear 
[,numMonth[ ,numDate]]) 


使 用 UTC 时 间 , 将 Date 对 象 实例 中 的 年 份 设 为 numYear。 可 选 
numMonth; 月 份 .numDate: 天 数 





setUTCHours ( numHours 
[:numMin[ , numSec 


[:numMilli ]]])) 


使 用 UTC 时 间 , 将 Date 对 象 实例 中 的 小 时 设 为 numHours, np i 
numMin: 分 钟 .numSec: 秒 .numMilli, 毫秒 





setUTCMilliseconds 
(umMilli? 


使 用 UTC 时间, 将 Date 对 象 实例 中 的 毫秒 设 为 numMilli 





setUTCMinutes 
(numMinutes[ , numSeconds 
[:numMilli]]) 


function 


使 用 UTC 时间, 将 Date 对 象 实例 中 的 分 钟 设 为 numMinutes。 可 选 
numSeconds; 秒 .numMilli: 毫秒 





setUTCMonth ( numMonth 
[,dateVal]) 


使 用 UTC 时 间 , 将 Date 对 象 实例 中 的 月 份 设 为 numMonth。 可 选 
dateVal: 天 数 





setUTCSeconds 
(numSeconds| , numMilli ]) 


使 用 UTC 时 间 , 将 Date 对 象 实例 中 的 秒 设 为 numSeconds, AY i 
numMilli; 毫秒 











set Year(numYear) 这 个 方法 已 经 过 时 ,请 改 用 setFullYear 方法 

abest 以 一 种 方便 、 易 读 的 格式 ,以 字符 串 形式 返回 一 个 日 期 。 例 如 ,返回 的 
3 形式 为 : Wed Oct 25 2006 

toGMTStringO 返回 值 的 格式 是 这 样 的 : 05 Jan 1996 00:00:00 GMT. toGMTString 


方法 已 经 过 时 。 推 荐 改 用 toUTCString 方法 





toLocaleDateString() 


以 本 地 区 域 设置 中 的 默认 格式 ,以 字符 串 值 的 形式 返回 一 个 日 期 。 例 
如 ,返回 的 形式 为 : 2006 年 10 月 25 日 





toLocaleString() 


以 本 地 区 域 设 置 中 的 默认 格式 ,以 字符 串 值 的 形式 返回 一 个 日 期 和 时 
间 。 例 如 ,返回 的 形式 为 : 2006 年 10 月 25 日 12:58:35 





toLocaleTimeString() 





以 本 地 区 域 设置 中 的 默认 格式 ,以 字符 串 值 的 形式 返回 时 间 。 例 如 ， 
返回 的 形式 为 : 12:58:35 
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方 法 说 明 





toTimeString() 以 字符 串 值 形式 返回 时 间 。 例 如 ,返回 的 形式 为 : 13:07:56 UTC 十 0800 





以 字符 串 值 的 形式 返回 一 个 日 期 和 时 间 。 例 如 ,返回 的 形式 为 , Wed， 


TS 25 Oct 2006 05:12:14 UTC 





UTC(year,month, day 
[,hours[ ,minutes[ ,seconds | 返回 从 UTC 1970 年 1 月 1 日 午夜 到 所 提供 日 期 之 间 的 毫秒 数 
[,ms]]]]) 








二 、 预 定义 函数 


预定 义 函 数 就 是 JavaScript 已 经 定义 好 的 函数 ,可 以 在 程序 中 作为 函数 直接 调用 。 
1. eval 函数 
eval 函数 的 语法 格式 如 下 


eval (codeString) 


其 中 ,codeString 是 一 字符 串 ,该 字符 串 的 内 容 是 一 个 合法 表达 式 ,eval 分 析 并 运行 该 表 
达 式 。 例 如 : 
Var mydate; 


eval ("mydate- new Date () ") ; 
var mydatel- eval("7* 8"); 


2. isFinite 函数 
isFinite 函数 的 语法 格式 如 下 : 
isFinite (number) 


说 明 : 如 果 number 是 一 个 finite 数 , 则 返回 true, 否 则 返回 false. 
例如 : 


document.write (isFinite (5-2)+"<br>"); //true 
document .write (isFinite (0)+"<br>"); //true 
document .write (isFinite("Hello")+"<br>"); //false 
document .write (isFinite ("2005/12/12")+"<br>"); //false 
3. isNaN 函数 

isFinite 函数 的 语法 格式 如 下 : 

isNaN (number) 


说 明 : 如 果 number 是 一 个 数 , 则 返回 false, 和 否则 返回 true, 
例如 : 
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document .write (isFinite (5-2)+"<br>"); 
document .write (isFinite(0)+"<br>"); 
document.write (isFinite ("Hello")+"<br>"); 
document.write (isFinite ("2005/12/12")+"<br>"); 


4. parseFloat 函数 
parseFloat 函数 的 语法 格式 如 下 : 


parseFloat (string) 


JavaScript 常 用 内 建 对 象 和 预定 义 函 数 


//false 
//false 
//true 


//true 


说 明 : parseFloat 函数 将 字符 串 形式 的 浮 点 数 string 转换 为 数值 型 的 数 。 


例如 : 


if (isNaN (parseFloat ("5e18")))( 
document.write ("REF AR"); 
}else{ 
document.write ("是 浮 点 数 "); 
} 


5. parselnt 函数 
parselnt 函数 的 语法 格式 如 下 : 


parseInt (string[, radix]) 


说 明 : parseInt 函数 将 字符 串 形式 的 整 型 数 string 转换 为 数值 型 的 数 。radix 为 基 
数 ,表示 string 的 进 制 ,如 : 8 表示 八进制 ,16 表示 十 六 进 制 ,默认 时 为 十 进 制 。 


例如 : 

parseInt ("10") 结果 10 
parseInt ("10.00") 结果 10 
parseInt ("10.33") 结果 10 
parseInt ("34 45 66") 结果 34( 只 取 第 一 个 字符 串 ) 
parseInt (" 60 ") 结果 60 
parseInt ("40 years") 结果 40 
parseInt ("He was 40") 结果 NaN 
parseInt ("10",10) 结果 10 
parseInt ("010") 结果 8 
parseInt ("10", 8) 结果 8 
parseInt ("0x10") 结果 16 
parseInt ("10",16) 结果 16 
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1. 鼠标 和 按键 事件 
鼠标 和 按键 事件 说 明 如 表 C-1 所 示 。 


事件 


RCI 鼠标 和 按键 事件 说 明 
d x 





onClick 


鼠标 单 击 事件 ,在 标记 对 象 控制 的 范围 内 的 鼠标 单 击 





onDblClick 


鼠标 双击 事件 ,在 标记 对 象 控制 的 范围 内 的 鼠标 双击 





onMouseDown 


在 标记 对 象 控制 的 范围 内 ,鼠标 上 的 按钮 被 按 下 





onMouseUp 


在 标记 对 象 控制 的 范围 内 ,鼠标 上 的 按钮 被 按 下 后 , 松 开 时 激发 的 事件 





onMouseOver 


在 标记 对 象 控制 的 范围 内 ,鼠标 移 到 标记 对 象 上 时 激发 的 事件 





onMouseMove 


在 标记 对 象 控制 的 范围 内 ,鼠标 移动 时 触发 的 事件 





onMouseOut 


在 标记 对 象 控制 的 范围 内 ,鼠标 离开 标记 对 象 上 时 激发 的 事件 





onKeyPress 


在 可 接受 文本 输入 的 标记 对 象 控制 的 范围 内 ,键盘 上 的 某 个 键 被 按 下 并 且 释 放 时 
触发 的 事件 





onKeyDown 


在 可 接受 文本 输入 的 标记 对 象 控制 的 范围 内 ,键盘 上 的 某 个 键 被 按 下 时 触发 的 
事件 





onKeyUp 





在 可 接受 文本 输入 的 标记 对 象 控制 的 范围 内 ,键盘 上 的 某 个 键 被 按 下 后 释放 时 触 
发 的 事件 





2. 页 面相 关 事件 
页 面相 关 事件 说 明 如 表 C-2 所 示 。 


表 C-2 页 面相 关 事件 说 明 





Ho fF 


描 3x 





onAbort 


图 片 在 下 载 时 被 用 户 中 断 





onBeforeUnload 


24 Bip va ii BE OE Al ZB fhe EF — RR FREE <body> tri P 





onError 





当前 页 面 因为 某 种 原因 而 出 现 的 错误 ,如 脚本 错误 与 外 部 数据 引用 的 错误 ,一 般 
用 在 二 body> 标 记 中 
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事 d 


描 g 





onLoad 


页 面 载 人 浏览 器 时 触发 的 事件 ,一 般 用 在 二 body 之 标记 中 





onMove 


浏览 器 的 窗口 被 移动 时 触发 的 事件 





onResize 


当 浏 览 器 的 窗口 大 小 被 改变 时 触发 的 事件 





onScroll 


浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 的 事件 





onStop 


浏览 器 的 停止 按钮 被 按 下 时 触发 的 事件 或 者 正在 下 载 的 文件 被 中 断 








onUnload 


当前 页 面 关闭 时 触发 的 事件 一 般 用 在 二 body 二 标记 中 





3. 表单 相关 


事件 


表单 相关 事件 说 明 如 表 C-3 所 示 。 


RCI 表单 相关 事件 说 阴 




















事 件 描 3 
onBlur 当前 标记 对 象 失去 焦点 时 触发 的 事件 
onChange 当前 元 素 失去 焦点 并 且 元 素 的 内 容 发 生 改变 而 触发 的 事件 
onFocus 标记 对 象 获 得 焦点 时 触发 的 事件 
onReset 当 表 单 中 RESET 的 属性 被 激发 时 触发 的 事件 
onSubmit 一 个 表单 被 提交 时 触发 的 事件 
4. 编辑 事件 


编辑 事件 说 明 如 表 C-4 所 示 。 


Ca ”编辑 事件 说 明 





o 件 


dH 3 





onBeforeCopy 


被 选择 内 容 将 要 复制 到 系统 的 剪贴 板 前 触发 的 事件 





onBeforeCut 


被 选择 内 容 将 要 剪 切 到 系统 的 剪贴 板 前 触发 的 事件 





onBeforeEditFocus 


在 聚焦 被 编辑 的 内 容 之 前 触发 的 事件 





onBeforePaste 


系统 剪贴 板 中 的 内 容 将 要 粘贴 到 标记 对 象 之 前 触发 的 事件 





onBeforeUpdate 


粘贴 系统 剪贴 板 中 的 内 容 时 触发 的 事件 





onChange 


内 容 发 生变 化 





onContextMenu 


按 下 鼠标 右键 时 触发 的 事件 





onCopy 


被 选择 的 内 容 被 复制 后 触发 的 事件 





onCut 


被 选择 的 内 容 被 剪 切 时 触发 的 事件 





onDrag 





对 象 被 拖 动 时 触发 的 事件 
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续 表 
事 件 ii 3 
onDragEnd 当 鼠 标 拖 动 结束 时 触发 的 事件 , 即 鼠 标的 按钮 被 释放 了 
onDragEnter 当 对 象 被 鼠标 拖 动 的 对 象 进入 其 容器 范围 内 时 触发 的 事件 
onDragLeave 鼠标 拖 动 的 对 象 离开 其 容器 范围 内 时 触发 的 事件 
onDragOver 鼠标 拖 动 的 对 象 越过 容器 范围 内 时 触发 的 事件 





onDragStart 


鼠标 拖 动 对 象 时 触发 的 事件 





onDrop 


拖 动 后 ,释放 鼠标 键 时 触发 的 事件 





onLoseCapture 


失去 鼠标 移动 所 形成 的 选择 焦点 时 触发 的 事件 





onPaste 


粘贴 时 触发 的 事件 





onSelect 


当 文本 内 容 被 选择 时 触发 的 事件 





onSelectStart 





当 文本 内 容 选择 将 开始 发 生 时 触发 的 事件 
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